>  기사  >  백엔드 개발  >  Form 양식 제출의 Ajax 구현 및 주의사항

Form 양식 제출의 Ajax 구현 및 주의사항

小云云
小云云원래의
2017-12-19 13:28:511465검색

양식 양식을 사용할 때 제출을 클릭하여 제출 이벤트가 발생하면 일반적으로 페이지 간 이동과 같은 동작 제어는 백엔드에서 수행되지만, 어떤 시점에서는 페이지가 점프하는 것을 원하지 않거나 프런트 엔드에 제어권을 두고 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"으로 변경했습니다. 성공했으니 여기서는 구체적으로 설명할 테니 저처럼 엉뚱한 길로 가지 마세요. 위의 코드와 마찬가지로 서버로 전송할 데이터 값도 있으니, 그냥 직렬화해서 전송하면 됩니다. 형태.

  • 관련 권장 사항:

새로 고침 없이 파일을 업로드하는 기능을 구현하는 ajax에 대한 자세한 설명 예

PHP에서 jQuery+Ajax를 사용하여 페이징 쿼리 기능 구현

AJAX를 통해 간단한 등록 페이지 비동기 구현 예시 코드 요청

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.