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

이번에는 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() 메소드를 통해 양식을 제출하는 것입니다. 예를 들어 이벤트에 대한 응답으로 JavaScript 코드로 양식을 제출합니다.

<!-- HTML -->
<form id="test-form">
  <input type="text" name="test">
  <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 提交form:
  form.submit();
}
</script>

이 방법은 브라우저가 양식을 정상적으로 제출하는 것을 방해한다는 것입니다. 기본적으로 브라우저는 을 클릭할 때 양식을 제출하거나 사용자가 마지막 입력 상자에서 Enter 키를 누릅니다. 따라서 두 번째 방법은 자체의 onsubmit 이벤트에 응답하고 양식을 제출할 때 수정하는 것입니다.

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
  <input type="text" name="test">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 继续下一步:
  return true;
}
</script>

브라우저에 계속 제출하도록 지시하려면 true를 반환해야 합니다. 브라우저는 양식을 계속 제출하지 않습니다. 이 상황은 일반적으로 사용자 입력 오류에 해당하며, 사용자에게 오류 메시지를 표시한 다음 양식 제출을 종료합니다. 을 확인하고 수정할 때 을 최대한 활용하여 데이터를 전달하세요.

예를 들어, 많은 로그인 양식에서는 사용자가 사용자 이름과 비밀번호를 입력해야 합니다. 그러나 보안상의 이유로 양식을 제출할 때 일반 텍스트 비밀번호는 전송되지 않고 비밀번호의 MD5가 전송됩니다. 일반 JavaScript 개발자는 을 직접 수정합니다:

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var pwd = document.getElementById('password');
  // 把用户输入的明文变为MD5:
  pwd.value = toMD5(pwd.value);
  // 继续下一步:
  return true;
}
</script>

이 접근 방식은 괜찮아 보이지만 사용자가 비밀번호를 입력하고 제출하면 비밀번호 상자 표시가 갑자기 몇 *에서 32*로 변경됩니다(MD5가 32자).

要想不改变用户的输入，可以利用实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="input-password">
  <input type="hidden" id="md5-password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var input_pwd = document.getElementById('input-password');
  var md5_pwd = document.getElementById('md5-password');
  // 把用户输入的明文变为MD5:
  md5_pwd.value = toMD5(input_pwd.value);
  // 继续下一步:
  return true;
}
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用history让ajax支持前进/后退/刷新

原生ajax与封装的ajax使用方法（附代码）

위 내용은 Ajax를 사용하여 JavaScript로 양식을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!