快捷導(dǎo)航

jQuery處理xml格式的返回?cái)?shù)據(jù)(實(shí)例解析)

更新時(shí)間：2013年11月28日 08:43:29 作者：

在以下示例中，我將使用$.ajax()方法，使用$.get()方法也可以，但我覺得$.ajax()更好一些，代碼更容易懂，并且也不怎么復(fù)雜

在這個(gè)示例程序中，我將使用$.ajax()方法，使用$.get()方法也可以，但我覺得$.ajax()更好一些，代碼更容易懂，并且也不怎么復(fù)雜。

//定義用戶名校驗(yàn)的方法
function verify(){
    //首先測(cè)試一下頁面的按鈕按下，可以調(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ù)回來了??！");
    //3.接收服務(wù)器端返回的數(shù)據(jù)
    //需要將data這個(gè)dom對(duì)象中的數(shù)據(jù)解析出來
    //首先需要將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)的顯示在頁面上
    //找到保存結(jié)果信息的節(jié)點(diǎn)
    var resultObj = $("#result");
    //動(dòng)態(tài)的改變頁面中div節(jié)點(diǎn)中的內(nèi)容
    resultObj.html(text);
    alert("");
}