在單頁(yè)面app中如何配合laravel更好的使用ajax
- 解釋常用到的ajax參數(shù)
$.ajax({
url: "/test", //ajax請(qǐng)求地址
//(默認(rèn): true,dataType為script和jsonp時(shí)默認(rèn)為false)設(shè)置為 false 將不緩存此頁(yè)面露泊，建議使用默認(rèn)
cache: false,
//請(qǐng)求方式 "POST" 或 "GET"睹欲， 默認(rèn)為 "GET"。
//注意：其它 HTTP 請(qǐng)求方法砂客，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持劫映。
type:"GET",
dataType:"json", //根據(jù)返回?cái)?shù)據(jù)類(lèi)型可以有這些類(lèi)型可選：xml html script json jsonp text
//發(fā)送到服務(wù)器的數(shù)據(jù)壹将，可以直接傳對(duì)象{a:0,b:1}，
//如果是get請(qǐng)求會(huì)自動(dòng)拼接到url后面，如：&a=0&b=1
//如果為數(shù)組袱饭，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱(chēng)川无。
//如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 "&foo=bar1&foo=bar2"。
data:{},
//發(fā)送請(qǐng)求前可修改 XMLHttpRequest 對(duì)象的函數(shù)虑乖，
//如添加自定義 HTTP 頭懦趋。XMLHttpRequest 對(duì)象是唯一的參數(shù)。
//這是一個(gè) Ajax 事件疹味。如果返回false可以取消本次ajax請(qǐng)求仅叫。
beforeSend:function(xhr){
//this 默認(rèn)為調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)
},
//請(qǐng)求成功后的回調(diào)函數(shù)
success: function(data,textStatus){
//this 調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù) ,
//如果設(shè)置context來(lái)改變了this，那這里的this就是改變過(guò)的
},
//請(qǐng)求失敗時(shí)調(diào)用此函數(shù)糙捺。有以下三個(gè)參數(shù)：
//XMLHttpRequest 對(duì)象诫咱、錯(cuò)誤信息、（可選）捕獲的異常對(duì)象洪灯。
//如果發(fā)生了錯(cuò)誤坎缭，錯(cuò)誤信息（第二個(gè)參數(shù)）除了得到null之外，
//還可能是"timeout", "error", "notmodified" 和 "parsererror"签钩。
error:function(XMLHttpRequest, textStatus, errorThrown){
// 通常 textStatus 和 errorThrown 之中
// 只有一個(gè)會(huì)包含信息
// this 調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)
},
//請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求成功或失敗之后均調(diào)用)掏呼。
//參數(shù)： XMLHttpRequest 對(duì)象和一個(gè)描述成功請(qǐng)求類(lèi)型的字符串
complete:function(XMLHttpRequest, textStatus) {
//this 調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)
},
//一組數(shù)值的HTTP代碼和函數(shù)對(duì)象，當(dāng)響應(yīng)時(shí)調(diào)用了相應(yīng)的代碼铅檩。例如憎夷，如果響應(yīng)狀態(tài)是404，將觸發(fā)以下警報(bào)：
statusCode:{
404:function(){
alert('404柠并，頁(yè)面不存在');
}
}
});
- jquery 的complete(XHR, TS)回調(diào)方法,可以理解為是響應(yīng)的攔截器,而beforeSend可以理解為請(qǐng)求的攔截器
// todo ajax設(shè)置
$.ajaxSetup({
beforeSend: function (xhr) {
getToken('/blank_csrf_request', function (token) {
xhr.setRequestHeader('X-XSRF-TOKEN', token); // 設(shè)置請(qǐng)求頭(同步請(qǐng)求)
});
},
complete: ajaxError || function () {
}
});
- complete 回調(diào)處理,沒(méi)登錄laravel中間件直接拋出401錯(cuò)誤.ajax監(jiān)聽(tīng)到進(jìn)行登錄頁(yè)的跳轉(zhuǎn)
var ajaxError = function (xhr) {
var status = xhr.status;
if (status === 401) {
// 未登錄 跳轉(zhuǎn)登錄頁(yè)
} else if (status === 403) {
// 其他錯(cuò)誤 如商品收藏中的商品已下架
}else{
// todo 正常頁(yè)面處理邏輯
// 如添加訪問(wèn)記錄
}
};
除此之外還需在每個(gè)A類(lèi)頁(yè)面判斷是否有權(quán)限訪問(wèn),如無(wú)權(quán)限還應(yīng)該顯示待登錄頁(yè)面
其中A類(lèi)頁(yè)面為底部導(dǎo)航欄對(duì)應(yīng)的頁(yè)面,如下圖中首頁(yè),我的都為A類(lèi)頁(yè)面.
image.png
- 兩小時(shí)不點(diǎn)擊系統(tǒng)報(bào)錯(cuò),如何處理? 其實(shí)是CSRF失效不存在導(dǎo)致的問(wèn)題
// todo 獲取TOKEN
var getToken = function (url, callback) {
url = url || '/';
var XSRF_TOKEN = document.cookie.match(/(^| )XSRF-TOKEN=([^;]*)(;|$)/);
if (!XSRF_TOKEN || XSRF_TOKEN === "") {
//發(fā)送一個(gè)空請(qǐng)求(同步)以更新cookie里的xsrf_token
$.ajax({
url: url,
async: false,//同步
beforeSend: function () {
},
success: function () {
callback && callback(unescape(document.cookie.match(/(^| )XSRF-TOKEN=([^;]*)(;|$)/)[2]));
}
});
} else {
callback && callback(unescape(XSRF_TOKEN[2]))
}
};
需要在laravel中增加路由
//全局的一個(gè)空請(qǐng)求以更新cookie里的xsrf token
Route::get('blank_csrf_request', 'Front\IndexController@blank_csrf_request');
對(duì)應(yīng)方法
//全局的一個(gè)空請(qǐng)求以更新cookie里的xsrf token
public function blank_csrf_request()
{
//該方法不需要做任何操作岭接，自動(dòng)會(huì)Set-Cookie:XSRF-TOKEN=...
return;
}
完
