Ajax를 사용하여 JavaScript로 양식을 작동하는 방법

php中世界最好的语言
풀어 주다: 2018-03-31 13:40:28
원래의
1825명이 탐색했습니다.

이번에는 JavaScriptajax를 사용하여 폼을 조작하는 방법과 JavaScript를 사용하여 ajax로 폼을 조작할 때 어떤 주의사항이 있는지 알려드리겠습니다. 다음은 실제 사례입니다.

JavaScript로 양식을 조작하는 것은 양식 자체도 DOM 트리이기 때문에 DOM을 조작하는 것과 유사합니다.

단, 양식의 입력 상자, 드롭다운 상자 등은 사용자 입력을 받을 수 있으므로 JavaScript를 사용하여 양식을 조작하면 사용자가 입력한 내용을 가져오거나 입력 상자에 새 내용을 설정할 수 있습니다.

HTML 양식의 입력 컨트롤에는 주로 다음 유형이 포함됩니다.

  • 텍스트 입력에 사용되는 에 해당하는 텍스트 상자; 비밀번호 상자, 해당 , 비밀번호 입력에 사용

  • oz라디오 버튼 상자, 해당 , 항목 선택에 사용;

  • checkbox
  • , 해당 , 여러 항목 선택에 사용

  • ol드롭다운 상자, 해당 에 해당하는 숨겨진 텍스트는 사용자에게 표시되지 않지만, 양식이 제출되면 숨겨진 텍스트가 서버로 전송됩니다.

  • 값 가져오기

  • 노드에 대한 참조를 얻으면 value를 직접 호출하여 해당 사용자 입력 값을 가져올 수 있습니다.

    // <input type="text" id="email">
    var input = document.getElementById('email');
    input.value; // '用户输入的值'
    로그인 후 복사
    이 방법은 텍스트에 적용할 수 있습니다. 비밀번호를 숨기고 선택하세요. 그러나 라디오 버튼과 체크박스의 경우 value 속성은 항상 HTML의 미리 설정된 값을 반환하며 실제로 우리가 얻어야 하는 것은 사용자가 옵션을 "선택"했는지 여부이므로 확인을 사용하여 판단해야 합니다.
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
로그인 후 복사

값 설정

값 설정은 값 가져오기와 유사합니다. 텍스트, 비밀번호, 숨김 및 선택의 경우 값을 직접 설정하세요.

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
로그인 후 복사
라디오 버튼과 체크박스의 경우 true 또는 false로 선택하면 됩니다. .

HTML5 컨트롤

HTML5에는 날짜, 날짜/시간, 날짜/시간-로컬, 색상 등이 일반적으로 사용되는 많은 표준 컨트롤이 추가되었습니다. 모두 태그를 사용합니다.

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
로그인 후 복사
브라우저 HTML5를 지원하지 않는 새 컨트롤은 인식할 수 없으며 type="text"로 표시됩니다. HTML5를 지원하는 브라우저는 형식화된 문자열을 가져옵니다. 예를 들어, type="date" 입력 값은 YYYY-MM-DD 형식의 유효한 날짜 또는 빈 문자열임이 보장됩니다.

양식 제출

마지막으로 JavaScript는 두 가지 방법으로 양식 제출을 처리할 수 있습니다(AJAX 방법은 나중에 소개됩니다).

첫 번째 방법은
요소의 submit() 메소드를 통해 양식을 제출하는 것입니다. 예를 들어
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿