이번에는 Ajax를 사용하여 Form 양식을 제출하는 단계에 대해 자세히 설명하겠습니다. Ajax를 사용하여 Form 양식을 제출할 때 주의사항은 무엇인가요?
양식을 사용할 때 제출을 클릭하여 제출 이벤트를 트리거하면 일반적으로 페이지 이동과 같은 동작 제어가 백엔드에서 이루어지며 백엔드는 페이지 이동과 데이터를 제어합니다. 그러나 어느 시점에서는 페이지가 점프하는 것을 원하지 않거나 프런트 엔드에 제어권을 두고 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="登录"> <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를 사용하여 양식을 제출하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!