jquery如何實現表單post方式提交
一、總結
一句話總結：即使js給form對象提供了submit()方法，那也不意為表單中可以不寫提交按鈕這個元素，即form表單依然需要五臟俱全才可以使用js的submit()方法進行提交。
二、js 模擬表單post方式提交
下面是用js動態創建form然后進行post提交的方式，參數url是表單提交的去向，參數params是給去向傳遞的參數（JSON結構），參數target設置何處打開鏈接文檔（可選）： cop
- function postcall( url, params, target){
- var tempform = document.createElement("form");
- tempform.action = url;
- tempform.method = "post";
- tempform.style.display="none"
- if(target) {
- tempform.target = target;
- }
- for (var x in params) {
- var opt = document.createElement("input");
- opt.name = x;
- opt.value = params[x];
- tempform.appendChild(opt);
- }
- var opt = document.createElement("input");
- opt.type = "submit";
- tempform.appendChild(opt);
- document.body.appendChild(tempform);
- tempform.submit();
- document.body.removeChild(tempform);
- }
注意：即使js給form對象提供了submit()方法，那也不意為表單中可以不寫提交按鈕這個元素，即form表單依然需要五臟俱全才可以使用js的submit()方法進行提交。
調用方式：
- postcall( 'newAnime', {page_num:1,page_size:10});
- 或 添加鏈接打開方式：
- postcall( 'newAnime', {page_num:1,page_size:10}, '_blank');
三、使用ajax方法實現form表單的提交
寫在前面的話
在使用form表單的時候,一旦點擊提交觸發submit事件，一般會使得頁面跳轉，頁面間的跳轉等行為的控制權往往在后端，后端會控制頁面的跳轉及數據傳遞，但是在某些時候不希望頁面跳轉，或者說想要將控制權放在前端，通過js來操作頁面的跳轉或者數據變化。
一般這種異步的操作，我們都會想到ajax方式，因此在實現了功能后就整理了這篇文章，通過ajax方法實現form表單的提交並進行后續的異步操作。
常見的form表單提交方式
login test1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>login test</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="pragma" content="no-cache"> 7 <meta http-equiv="cache-control" content="no-cache"> 8 <meta http-equiv="expires" content="0"> 9 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 10 <meta http-equiv="description" content="login test"> 11 </head> 12 <body> 13 <div id="form-div"> 14 <form id="form1" action="/users/login" method="post"> 15 <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> 16 <p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p> 17 <p><input type="submit" value="登錄"> <input type="reset" value="重置"></p> 18 </form> 19 </div> 20 </body> 21 </html>
點擊登錄按鈕后，即觸發form表單的提交事件，數據傳輸至后端，由后端控制頁面跳轉和數據。
ajax實現form提交方式
修改完成后代碼如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>login test</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="pragma" content="no-cache"> 7 <meta http-equiv="cache-control" content="no-cache"> 8 <meta http-equiv="expires" content="0"> 9 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 10 <meta http-equiv="description" content="ajax方式"> 11 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 12 <script type="text/javascript"> 13 function login() { 14 $.ajax({ 15 //幾個參數需要注意一下 16 type: "POST",//方法類型 17 dataType: "json",//預期服務器返回的數據類型 18 url: "/users/login" ,//url 19 data: $('#form1').serialize(), 20 success: function (result) { 21 console.log(result);//打印服務端返回的數據(調試用) 22 if (result.resultCode == 200) { 23 alert("SUCCESS"); 24 } 25 ; 26 }, 27 error : function() { 28 alert("異常！"); 29 } 30 }); 31 } 32 </script> 33 </head> 34 <body> 35 <div id="form-div"> 36 <form id="form1" onsubmit="return false" action="##" method="post"> 37 <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> 38 <p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p> 39 <p><input type="button" value="登錄" onclick="login()"> <input type="reset" value="重置"></p> 40 </form> 41 </div> 42 </body> 43 </html>
login test
注意事項
- 在常用方式中，點擊的登錄按鈕的type為"submit"類型；
- 在常用方式中，form的action不為空；
- ajax方式中需要注意的是$.ajax方法中的參數：dataType和data。
我平時很少寫前端代碼，級別也就是入門級別，能看懂能改而已，所以很多時候都是百度，像這次這個功能的實現也是借助了百度，但是，我百度到的代碼在$.ajax方法中設置的dataType參數值為"html"而不是"json"，導致我在一開始調試的時候一直報錯，最終是改成了"json"才成功，因此在這里特別說明並提醒一下，別和我一樣走錯了路，還有就是向服務端傳輸的data值了，像上面代碼一樣，將form表單中的數據序列化傳輸即可。