기존의 양식 제출은 모두 페이지 점프 형식이지만 지금은 Ajax 제출이 더 인기가 있습니다. 그렇다면 양식 제출의 단순성과 Ajax의 효과를 원한다면 해결책이 있을까요?
사용 방법
두 가지 사용 방법:
첫 번째 방법
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-form.js"></script> <script> // 使用ajaxForm $(function(){ $("#myForm").ajaxForm(function(){ $("#output1").html("提交成功").show(); }) }) </script> </head> <body> <form id="myForm"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" value="提交"> <div id="output1" style="display: none"></div> </form> </body> </html>
두 번째 방법
아아아아첫 번째 방법이 더 편리한 것 같아요.
function() 매개변수는 제출 성공 후의 콜백 함수입니다.
이 제출 방법을 사용하면 비동기 양식 제출이 가능해 매우 편리합니다. 하지만 여전히 약간 불만족스럽습니다. 예를 들어 양식 제출 작업 외부에서 수동으로 수행할 수 있지만 매우 번거롭습니다. 양식 플러그인이 이러한 기능을 상속합니까?
2. 옵션 매개변수
위에서는 양식에 있는 하나의 함수 콜백 함수 매개변수에 대해서만 설명합니다. 실제로 옵션이라는 또 다른 매개변수도 있습니다. 무슨 소용이 있나요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-form.js"></script> <script> $(function(){ //方式二 与方式一效果一样 $("#myForm").submit(function(){ // 使用ajaxSubmit $(this).ajaxSubmit(function(){ $("#output1").html("提交成功").show(); }); return false; }) }) </script> </head> <body> <form id="myForm"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit" value="提交"> <div id="output1" style="display: none"></div> </form> </body> </html>
beforeSubmit의 콜백 함수 fun1에는 formData, jqForm, fieldValue의 세 가지 방법으로 양식 데이터를 가져오는 것을 볼 수 있으며, 이는 값을 얻는 다양한 방법을 만족하는지 확인할 수 있습니다. . false를 반환하는 한 양식이 제출되지 않도록 할 수 있습니다. 성공 콜백의 fun2에도 상태 값이 있으며 서버에서 데이터를 반환하는 방식으로 처리할 수 있습니다.