jQuery處理xml格式的返回?cái)?shù)據(jù)(實(shí)例解析)
更新時(shí)間:2013年11月28日 08:43:29 作者:
在以下示例中,我將使用$.ajax()方法,使用$.get()方法也可以,但我覺(jué)得$.ajax()更好一些,代碼更容易懂,并且也不怎么復(fù)雜
在這個(gè)示例程序中,我將使用$.ajax()方法,使用$.get()方法也可以,但我覺(jué)得$.ajax()更好一些,代碼更容易懂,并且也不怎么復(fù)雜。
//定義用戶(hù)名校驗(yàn)的方法
function verify(){
//首先測(cè)試一下頁(yè)面的按鈕按下,可以調(diào)用這個(gè)方法
//使用javascript的alert方法,顯示一個(gè)探出提示框
//alert("按鈕被點(diǎn)擊了?。?!");
//1.獲取文本框中的內(nèi)容
//document.getElementById("userName"); dom的方式
//Jquery的查找節(jié)點(diǎn)的方式,參數(shù)中#加上id屬性值可以找到一個(gè)節(jié)點(diǎn)。
//jquery的方法返回的都是jquery的對(duì)象,可以繼續(xù)在上面執(zhí)行其他的jquery方法
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//alert(userName);
//2.將文本框中的數(shù)據(jù)發(fā)送給服務(wù)器段的servelt
//javascript當(dāng)中,一個(gè)簡(jiǎn)單的對(duì)象的定義方法
var obj = {name:"123",age:20};
//使用jquery的XMLHTTPrequest對(duì)象get請(qǐng)求的封裝
$.ajax({
type: "POST", //http請(qǐng)求方式
url: "AJAXXMLServer", //服務(wù)器段url地址
data: "name=" + userName, //發(fā)送給服務(wù)器段的數(shù)據(jù)
dataType: "xml", //告訴JQuery返回的數(shù)據(jù)格式
success: callback //定義交互完成,并且服務(wù)器正確返回?cái)?shù)據(jù)時(shí)調(diào)用的回調(diào)函數(shù)
});
}
回調(diào)函數(shù):
//回調(diào)函數(shù)
function callback(data) {
// alert("服務(wù)器段的數(shù)據(jù)回來(lái)了??!");
//3.接收服務(wù)器端返回的數(shù)據(jù)
//需要將data這個(gè)dom對(duì)象中的數(shù)據(jù)解析出來(lái)
//首先需要將dom的對(duì)象轉(zhuǎn)換成JQuery的對(duì)象
var jqueryObj = $(data);
//獲取message節(jié)點(diǎn)
var message = jqueryObj.children();
//獲取文本內(nèi)容
var text = message.text();
//4.將服務(wù)器段返回的數(shù)據(jù)動(dòng)態(tài)的顯示在頁(yè)面上
//找到保存結(jié)果信息的節(jié)點(diǎn)
var resultObj = $("#result");
//動(dòng)態(tài)的改變頁(yè)面中div節(jié)點(diǎn)中的內(nèi)容
resultObj.html(text);
alert("");
}
復(fù)制代碼 代碼如下:
//定義用戶(hù)名校驗(yàn)的方法
function verify(){
//首先測(cè)試一下頁(yè)面的按鈕按下,可以調(diào)用這個(gè)方法
//使用javascript的alert方法,顯示一個(gè)探出提示框
//alert("按鈕被點(diǎn)擊了?。?!");
//1.獲取文本框中的內(nèi)容
//document.getElementById("userName"); dom的方式
//Jquery的查找節(jié)點(diǎn)的方式,參數(shù)中#加上id屬性值可以找到一個(gè)節(jié)點(diǎn)。
//jquery的方法返回的都是jquery的對(duì)象,可以繼續(xù)在上面執(zhí)行其他的jquery方法
var jqueryObj = $("#userName");
//獲取節(jié)點(diǎn)的值
var userName = jqueryObj.val();
//alert(userName);
//2.將文本框中的數(shù)據(jù)發(fā)送給服務(wù)器段的servelt
//javascript當(dāng)中,一個(gè)簡(jiǎn)單的對(duì)象的定義方法
var obj = {name:"123",age:20};
//使用jquery的XMLHTTPrequest對(duì)象get請(qǐng)求的封裝
$.ajax({
type: "POST", //http請(qǐng)求方式
url: "AJAXXMLServer", //服務(wù)器段url地址
data: "name=" + userName, //發(fā)送給服務(wù)器段的數(shù)據(jù)
dataType: "xml", //告訴JQuery返回的數(shù)據(jù)格式
success: callback //定義交互完成,并且服務(wù)器正確返回?cái)?shù)據(jù)時(shí)調(diào)用的回調(diào)函數(shù)
});
}
回調(diào)函數(shù):
復(fù)制代碼 代碼如下:
//回調(diào)函數(shù)
function callback(data) {
// alert("服務(wù)器段的數(shù)據(jù)回來(lái)了??!");
//3.接收服務(wù)器端返回的數(shù)據(jù)
//需要將data這個(gè)dom對(duì)象中的數(shù)據(jù)解析出來(lái)
//首先需要將dom的對(duì)象轉(zhuǎn)換成JQuery的對(duì)象
var jqueryObj = $(data);
//獲取message節(jié)點(diǎn)
var message = jqueryObj.children();
//獲取文本內(nèi)容
var text = message.text();
//4.將服務(wù)器段返回的數(shù)據(jù)動(dòng)態(tài)的顯示在頁(yè)面上
//找到保存結(jié)果信息的節(jié)點(diǎn)
var resultObj = $("#result");
//動(dòng)態(tài)的改變頁(yè)面中div節(jié)點(diǎn)中的內(nèi)容
resultObj.html(text);
alert("");
}
相關(guān)文章
jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容的實(shí)現(xiàn)方法,代碼非常簡(jiǎn)單,具有參考借鑒價(jià)值,需要的朋友參考下2016-08-08jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁(yè)面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08加載列表時(shí)jquery獲取ul中第一個(gè)li的屬性
通過(guò)jquery獲取ul中第一個(gè)li的屬性,當(dāng)加載列表時(shí),默認(rèn)希望選中第一條,下面是具體的實(shí)現(xiàn)代碼2014-11-11jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
jQuery實(shí)現(xiàn)右下角自動(dòng)彈出可關(guān)閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實(shí)現(xiàn)。有需要的小伙伴可以參考下。2015-05-05