집 >웹 프론트엔드 >JS 튜토리얼 >Form 양식 제출을 구현하는 Ajax 방법

Form 양식 제출을 구현하는 Ajax 방법

php中世界最好的语言원래의: 2018-03-31 11:12:312453검색

이번에는 Form 양식 제출을 구현하는 Ajax 방법을 소개하겠습니다. Form 양식 제출을 구현하는 Ajax 방법의 주의사항은 무엇입니까?

전에 쓴 내용

양식을 사용할 때 제출을 클릭하여 제출 이벤트를 트리거하면 일반적으로 페이지가 점프하게 되며 페이지 간 점프 및 기타 동작에 대한 제어는 종종 백엔드 페이지 점프와 데이터 전송을 제어하지만 어떤 시점에서는 페이지 점프를 원하지 않거나 프런트 엔드에 제어를 두고 js를 사용하여 페이지 점프 또는 데이터 변경을 수행하려고 합니다.

일반적으로 이런 종류의 비동기 작업을 위해서는 ajax 메서드를 생각하게 되므로, 함수 구현 후 이 글을 컴파일하여 ajax 메서드를 통한 양식 제출 및 후속 비동기 작업을 구현했습니다.

일반적인 양식 제출 방법

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="login test">  
</head>
<body>
<p id="form-p">
  <form id="form1" action="/users/login" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
  </form>
</p>
</body>
</html>

로그인 버튼을 클릭한 후 양식 양식 제출 이벤트가 트리거되고 페이지 점프 및 데이터를 제어하는 백엔드로 데이터가 전송됩니다.

ajax는 양식 제출 방식을 구현합니다

수정 후 코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="ajax方式">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    function login() {
      $.ajax({
      //几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//服务端接收的数据类型
        url: "/users/login" ,//url
        data: $('#form1').serialize(),
        success: function (result) {
          console.log(result);//打印服务端返回的数据(调试用)
          if (result.resultCode == 200) {
            alert("SUCCESS");
          }
          ;
        },
        error : function() {
          alert("异常！");
        }
      });
    }
  </script>
</head>
<body>
<p id="form-p">
  <form id="form1" onsubmit="return false" action="##" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
  </form>
</p>
</body>
</html>

Notes

일반적인 방식에서 클릭한 로그인 버튼의 유형은 "submit"입니다. type;
일반적인 메소드에서 폼의 액션은 비어 있지 않습니다.
ajax 메소드에서 주의해야 할 것은 $.ajax 메소드의 매개변수인 dataType과 data입니다.

프런트엔드 코드를 거의 작성하지 않는 편인데, 이해하고 변경할 수 있어서 이번에도 바이두를 이용해서 이 기능을 구현했습니다. $.ajax 메서드의 코드에서 설정한 dataType 매개 변수 값이 "json"이 아닌 "html"이므로 처음 디버깅할 때 계속 오류가 보고되었습니다. 결국 이를 "json"으로 변경했습니다. 성공했으니 여기서는 구체적으로 설명할 테니 저처럼 엉뚱한 길로 가지 마세요. 위의 코드와 마찬가지로 서버로 전송할 데이터 값도 있으니, 그냥 직렬화해서 전송하면 됩니다. 형태.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!