談談 ajax 的不同用法
1. $.ajax() 是jquery通用的一個ajax 封裝,語法:$.ajax( 選項 ) , 選項是一個對象
常用參數:
聲明一個變量獲取phone值:var xPhone = $(‘#xPhone‘).val();
$.ajax({
url:“a.php” ("/api/ser"), //發送請求的地址
data: { phone: xPhone, name: $("#username").val() }, // data:{ 後臺接口的參數名:頁面獲取到的變量 }
type: ‘post‘ , //type默認是get
datatype: "json", // datatype 指定服務器返回的數據類型
success: function(data){ // success 是請求成功後的回調函數 ,可以根據需要做一些判斷操作
console.log("請求成功了");
if(data.ret_id === 200){
alert("提交成功");
window.location.href = "index.html"; // 頁面重定向
}
},
error
console.log("服務器請求失敗");
}
});
2. $.get() 使用get 方式進行ajax異步請求,語法: $.get(url [,data] [,callback] ),
參數解釋:url: ajax請求的地址。data: 可選參數,對象類型,發送到服務器的數據會顯示在請求的url中。callback: 可選參數,ajax請求成功時自動調用該函數。
例子:status 狀態碼
$.get("b.php", {phone: xPhone, name: $("#username").val(), id: ‘111‘}, function(data,status){
console.log(data)
if(status === 200){
console.log("請求成功");
}else{
console.log("請求失敗");
}
});
3. $.post() 使用 post 方式進行ajax異步請求, 語法:$.post(url [,data ] [,callback][,type]), 比$.get()多了一個type參數
例子:表單提交的時候請求 ajax
$("#form1").submit(function(e){
e.preventDefault(); //阻止表單默認提交
$.post("./js/a.json", {phone: xPhone, age: xAge}, function(data){
if(data.ret_cd === 200){
alert("留言成功");
}else{
alert("留言失敗");
}
}, "json") // type: 請求的數據類型(有html xml json),設置為 json, 則返回的格式是json格式的,不設置默認和$.get()返回的一樣,是字符串格式
})
4. $.getJSON(): 用於ajax獲取json數據,語法: $.getJSON(url [,data] [,callback]) ,參數解釋同$.get() $.post()
$.getJSON可以通過把請求url寫成"aaa.php?callback=X" , 讓程序執行回調函數X。
缺點:發送的數據量不能太多,否則造成url太長接收失敗
談談 ajax 的不同用法