jquery中g(shù)et,post和ajax方法的使用小結(jié)
在JQuery中可以使用get,post和ajax方法給服務(wù)器端傳遞數(shù)據(jù)
get方法的使用(customForGet.js文件):
function verify(){
//1.獲取文本框的數(shù)據(jù)
//通過DOM的方式獲取
//document.getElementByIdx("userName");
//通過JQuery的方式獲取
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//2.將文本框的數(shù)據(jù)發(fā)送到服務(wù)器端的servlet
$.get("AJAXServer?name=" + userName,null,callback);
}
//回調(diào)函數(shù)
function callback(data){
//3.接受從服務(wù)器端返回的數(shù)據(jù)
// alert(data);
//4.將服務(wù)器端的返回的數(shù)據(jù)顯示到頁(yè)面上
//取到用來顯示結(jié)果信息的節(jié)點(diǎn)
var resultObj = $("#result");
resultObj.html(data);
}
可以將上面的文件簡(jiǎn)寫成:
function verify(){
$.get("AJAXServer?name="+$("#userName").val(),null,function callback(data){$("#result").html(data);});
}
post方法的使用(customForPost.js):
function verify(){
//1.獲取文本框的數(shù)據(jù)
//通過DOM的方式獲取
//document.getElementByIdx("userName");
//通過JQuery的方式獲取
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//2.將文本框的數(shù)據(jù)發(fā)送到服務(wù)器端的servlet
// $.post("AJAXServer?name=" + userName,null,callback);//用post是也可以直接將參數(shù)跟在URL后面
$.post("AJAXServer",{name:userName,test:"test123"},callback);//傳遞多個(gè)參數(shù)時(shí)用逗號(hào)隔開,屬性值如果是變量的話直接寫上,如:userName,如果是字符的話要加上引號(hào),如:“test123”.
}
//回調(diào)函數(shù)
function callback(data){
//3.接受從服務(wù)器端返回的數(shù)據(jù)
// alert(data);
//4.將服務(wù)器端的返回的數(shù)據(jù)顯示到頁(yè)面上
//取到用來顯示結(jié)果信息的節(jié)點(diǎn)
var resultObj = $("#result");
resultObj.html(data);
}
可以將上面的文件簡(jiǎn)寫成:
function verify(){
$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});
}
總結(jié):其實(shí)get和post方法相似,只要將get和post互換即可,而參數(shù)的存放位置兩個(gè)地方都行;
如:
$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});
只要將post直接改成get,而不用修改參數(shù)的位置,即:
$.get("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});
ajax方法的使用(customForAjaxText)接收數(shù)據(jù)類型是純文本的數(shù)據(jù):
function verify(){
//1.獲取文本框的數(shù)據(jù)
//通過JQuery的方式獲取
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//2.將文本框的數(shù)據(jù)發(fā)送到服務(wù)器端的servlet
$.ajax({
type:"POST",
url:"AJAXServer",
data:"name="+userName+"&"+"test=123",
success:function(data){
$("#result").html(data);
}
});
}
ajax方法的使用(customForAjaxText)接收數(shù)據(jù)類型是XML的數(shù)據(jù):
function verify(){
//1.獲取文本框的數(shù)據(jù)
//通過JQuery的方式獲取
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//2.將文本框的數(shù)據(jù)發(fā)送到服務(wù)器端的servlet
$.ajax({
type:"POST",
url:"AJAXXMLServer",
data:"name="+userName+"&"+"test=123",
dataType:"xml",
success:function(data){
//首先需要將傳過來的DOM對(duì)象轉(zhuǎn)化為jquery對(duì)象
var jqueryObj = $(data);
//獲取message節(jié)點(diǎn)
var messageNods = jqueryObj.children();
//獲取文本內(nèi)容
var responseText = messageNods.text();
$("#result").html(responseText);
}
});
}
- jQuery中ajax的load()與post()方法實(shí)例詳解
- jQuery中ajax - get() 方法實(shí)例詳解
- jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法
- jQuery中Ajax的get、post等方法詳解
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
- jQuery中ajax的get()方法用法實(shí)例
- jQuery中ajax的load()方法用法實(shí)例
- 詳談jQuery Ajax(load,post,get,ajax)的用法
相關(guān)文章
分享一些常用的jQuery動(dòng)畫事件和動(dòng)畫函數(shù)
在jquery中,jquery動(dòng)畫事件和動(dòng)畫函數(shù)經(jīng)常用的到,今天小編抽時(shí)間給大家整理了些關(guān)于常用的jquery動(dòng)畫事件和動(dòng)畫函數(shù),對(duì)jquery動(dòng)畫函數(shù)和動(dòng)畫事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法
這篇文章主要介紹了jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法,很簡(jiǎn)單,很實(shí)用,需要的朋友可以參考下2014-09-09
jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
這篇文章主要介紹了jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼,有需要的朋友可以參考一下2013-12-12
Jquery Post處理后不進(jìn)入回調(diào)的原因及解決方法
通過Jquery的Post方法把Json數(shù)據(jù)傳到Jsp后臺(tái),處理后卻怎么都不進(jìn)入回調(diào)函數(shù),解決方法如下2014-07-07
jquery 實(shí)現(xiàn)回車登錄詳解及實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)回車登錄詳解的相關(guān)資料,整理了幾種方法及簡(jiǎn)單實(shí)現(xiàn)實(shí)例,需要的朋友可以參考下2016-10-10
分享20個(gè)提升網(wǎng)站界面體驗(yàn)的jQuery插件
今天為大家整理20個(gè)提升網(wǎng)站界面的體驗(yàn)的jQuery插件,這些都是比較“新款”的代碼,喜歡的請(qǐng)用到你的網(wǎng)站項(xiàng)目上吧2014-12-12
jquery綁定原理 簡(jiǎn)單解析與實(shí)現(xiàn)代碼分享
下面的內(nèi)容只是自己的一些理解,水平有限,難免有錯(cuò),望指正2011-09-09
jQuery實(shí)現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果,可實(shí)現(xiàn)固定位置顯示及響應(yīng)鼠標(biāo)點(diǎn)擊展開與關(guān)閉的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11
jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01

