집 > 기사 > 백엔드 개발 > Form 폼 제출 구현을 위한 Ajax 방식과 주의사항에 대한 자세한 설명

Form 폼 제출 구현을 위한 Ajax 방식과 주의사항에 대한 자세한 설명

小云云원래의: 2017-12-26 10:20:031324검색

양식 양식을 사용할 때 제출을 클릭하여 제출 이벤트가 발생하면 일반적으로 페이지 간 이동과 같은 동작 제어는 백엔드에서 수행되지만, 어떤 시점에서는 페이지가 점프하는 것을 원하지 않거나 프런트 엔드에 제어권을 두고 js를 사용하여 페이지 점프 또는 데이터 변경을 수행하고 싶습니다. 이 글은 주로 Ajax 메소드를 사용하여 Form 제출을 구현하는 방법과 주의사항을 소개합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다.

일반적으로 이런 종류의 비동기 작업을 위해서는 우리 모두 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

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

양식 양식을 html로 제출할 때 페이지가 이동하는 것을 방지하는 방법에 대한 자세한 설명

자바스크립트에서 일반적으로 사용되는 양식 양식 코드 공유(컬렉션)

양식 양식 제출 정보 및 HTML의 버튼 사용 세부 정보 제출

위 내용은 Form 폼 제출 구현을 위한 Ajax 방식과 주의사항에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP가 문자열에서 함수를 생성하는 방법을 설명하세요.다음 기사：PHP가 문자열에서 함수를 생성하는 방법을 설명하세요.