在這個樣本程式中,我將使用$.ajax()方法,使用$.get()方法也可以,但我覺得$.ajax()更好一些,代碼更容易懂,並且也不怎麼複雜。
複製代碼 代碼如下:
//定義使用者名稱校正的方法
function verify(){
//首先測試一下頁面的按鈕按下,可以調用這個方法
//使用javascript的alert方法,顯示一個探出提示框
//alert("按鈕被點擊了!!!");
//1.擷取文字框中的內容
//document.getElementById("userName"); dom的方式
//Jquery的尋找節點的方式,參數中#加上id屬性值可以找到一個節點。
//jquery的方法返回的都是jquery的對象,可以繼續在上面執行其他的jquery方法
var jqueryObj = $("#userName");
//擷取節點的值
var userName = jqueryObj.val();
//alert(userName);
//2.將文字框中的資料發送給伺服器段的servelt
//javascript當中,一個簡單的對象的定義方法
var obj = {name:"123",age:20};
//使用jquery的XMLHTTPrequest對象get請求的封裝
$.ajax({
type: "POST", //http請求方式
url: "AJAXXMLServer", //伺服器段url地址
data: "name=" + userName, //發送給伺服器段的資料
dataType: "xml", //告訴JQuery返回的資料格式
success: callback //定義互動完成,並且伺服器正確返回資料時調用的回呼函數
});
}
回呼函數:
複製代碼 代碼如下:
//回呼函數
function callback(data) {
// alert("伺服器段的資料回來了!!");
//3.接收伺服器端返回的資料
//需要將data這個dom對象中的資料解析出來
//首先需要將dom的對象轉換成JQuery的對象
var jqueryObj = $(data);
//擷取message節點
var message = jqueryObj.children();
//擷取常值內容
var text = message.text();
//4.將伺服器段返回的資料動態顯示在頁面上
//找到儲存結果資訊的節點
var resultObj = $("#result");
//動態改變頁面中div節點中的內容
resultObj.html(text);
alert("");
}