jQuery Ajax 非同步請求data引數資料格式的六種方法
阿新 • • 發佈：2018-11-22
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="login" method="post" action="result.jsp"> <input name="user" type="text"/> <input name="sex" type="radio" value="man"/> <input name="sex" type="radio" value="woman"/> interest: <input type="checkbox" name="interest" value="piu">PIU <input type="checkbox" name="interest" value="dss">DSS <input type="checkbox" name="interest" value="ddr">DDR<br> <input type="button" name="submit" value="submit" onclick="getFormInfo();"> </form> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> //第一種寫法（拼接URL） function getFormInfo(){ var name='wen'; var user='chen'; $.ajax({ url: "/login/authenticate?name="+name+"&user="+user, type: "POST", data:{}, dataType: "json", success: function(data){ }, error:function(err){ console.log(err.statusText); console.log('異常'); } }); } //第二種寫法（表單序列化為json資料） function getFormInfo(){ var params=$('#login').serializeJSON(); console.log(params); $.ajax({ url: "http://192.168.1.10:8088/login/authenticate", type: "POST", data:params, cache:false, dataType: "json", success: function(data){ }, error:function(err){ } }); } // 第三種寫法（表單序列化為字串） function getFormInfo(){ var params=$('#login').serialize(); console.log(params); $.ajax({ url: "http://192.168.1.10:8088/login/authenticate", type: "POST", data:params, cache:false, dataType: "json", success: function(data){ }, error:function(err){ } }); } //第四種寫法（帶json資料） function getFormInfo(){ $.ajax({ url: "http://192.168.1.10:8088/login/authenticate", type: "POST", data:{ name:'chem', user:'wen' }, cache:false, dataType: "json", success: function(data){ }, error:function(err){ } }); } //第五種寫法（拼接data） function getFormInfo(){ var name='chen'; var user='wen'; $.ajax({ url: "http://192.168.1.10:8088/login/authenticate", type: "POST", data:'name='+name+'&user='+user, cache:false, dataType: "json", success: function(data){ }, error:function(err){ } }); } //第六種寫法（既有全部直接獲取表單中的資料又有單獨出來的資料） function getFormInfo(){ var params=$('#login').serializeJSON(); console.log(params); params.height='20'; $.ajax({ url: "http://192.168.1.10:8088/login/authenticate", type: "POST", data:params, cache:false, dataType: "json", success: function(data){ }, error:function(err){ } }); } </script> </body> </html>