jquery中get,post和ajax方法的使用小結

 本篇文章主要是對jquery中get,post和ajax方法的使用進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所協助

在JQuery中可以使用get，post和ajax方法給伺服器端傳遞資料 get方法的使用（customForGet.js檔案）： function verify(){//1.擷取文字框的資料 //通過DOM的方式擷取//document.getElementByIdx("userName");//通過JQuery的方式擷取var jqueryObj = $("#userName");//擷取節點的值var userName = jqueryObj.val(); //2.將文字框的資料發送到伺服器端的servlet$.get("AJAXServer?name=" + userName,null,callback);}//回呼函數function callback(data){ //3.接受從伺服器端返回的資料// alert(data);//4.將伺服器端的返回的資料顯示到頁面上//取到用來顯示結果資訊的節點var resultObj = $("#result");resultObj.html(data);} 可以將上面的檔案簡寫成：function verify(){$.get("AJAXServer?name="+$("#userName").val(),null,function callback(data){$("#result").html(data);});} post方法的使用（customForPost.js）： function verify(){//1.擷取文字框的資料 //通過DOM的方式擷取//document.getElementByIdx("userName");//通過JQuery的方式擷取var jqueryObj = $("#userName");//擷取節點的值var userName = jqueryObj.val(); //2.將文字框的資料發送到伺服器端的servlet  // $.post("AJAXServer?name=" + userName,null,callback);//用post是也可以直接將參數跟在URL後面$.post("AJAXServer",{name:userName,test:"test123"},callback);//傳遞多個參數時用逗號隔開，屬性值如果是變數的話直接寫上，如：userName，如果是字元的話要加上引號，如：“test123”.}//回呼函數function callback(data){ //3.接受從伺服器端返回的資料// alert(data);//4.將伺服器端的返回的資料顯示到頁面上//取到用來顯示結果資訊的節點var resultObj = $("#result");resultObj.html(data);}  可以將上面的檔案簡寫成：function verify(){$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});} 總結：其實get和post方法相似，只要將get和post互換即可，而參數的存放位置兩個地方都行； 如： $.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)}); 只要將post直接改成get，而不用修改參數的位置，即： $.get("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)}); ajax方法的使用（customForAjaxText）接收資料類型是純文字的資料： function verify(){//1.擷取文字框的資料//通過JQuery的方式擷取var jqueryObj = $("#userName");//擷取節點的值var userName = jqueryObj.val(); //2.將文字框的資料發送到伺服器端的servlet$.ajax({type:"POST",url:"AJAXServer",data:"name="+userName+"&"+"test=123",success:function(data){$("#result").html(data);}});} ajax方法的使用（customForAjaxText）接收資料類型是XML的資料： function verify(){//1.擷取文字框的資料//通過JQuery的方式擷取var jqueryObj = $("#userName");//擷取節點的值var userName = jqueryObj.val(); //2.將文字框的資料發送到伺服器端的servlet$.ajax({type:"POST",url:"AJAXXMLServer",data:"name="+userName+"&"+"test=123", dataType:"xml",success:function(data){//首先需要將傳過來的DOM對象轉化為jquery對象var jqueryObj = $(data);//擷取message節點var messageNods = jqueryObj.children();//擷取常值內容var responseText = messageNods.text();$("#result").html(responseText);}});}