Ajax的javascript與jQuery合集
阿新 • • 發佈:2018-11-14
1.jQuery方式的ajax請求
1)json字串返回
$.ajax({
type : 'POST',
url : 'oms/icon/update',
dataType : "json",
success : function(data) {
/**重點:前臺接收到返回值,直接處理就行*/
alert(data);
},
error : function(e) {
alert(e);
}
});
2)json物件返回
$.ajax({ type : 'POST', url : 'oms/icon/update', dataType : "json", success : function(data) { /**重點:前臺接收到返回值,直接處理就行*/ alert(data.msg); }, error : function(e) { alert(e); } });
比較第一種與第二種寫法的區別,只是sucess方法裡面的提示不一樣,一個是data,一個是data.msg,如果是data.msg的形式,則要求後端返回的必須是一個json物件,而不能是json字串。
2.javascript方式的Ajax請求。
以post方式:
//建立非同步物件 var xhr = new XMLHttpRequest(); //設定請求的型別及url //post請求一定要新增請求頭才行不然會報錯 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', '02.post.php' ); //傳送請求 xhr.send('name=fox&age=18'); xhr.onreadystatechange = function () { // 這步為判斷伺服器是否正確響應 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };
get方式:
//步驟一:建立非同步物件 var ajax = new XMLHttpRequest(); //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starName到服務端 ajax.open('get','getStar.php?starName='+name); //步驟三:傳送請求 ajax.send(); //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫 ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) { //步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的 console.log(ajax.responseText);//輸入相應的內容 } }