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

來源:互聯網
上載者:User

 本篇文章主要是對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);}});} 
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。