在单页面app中如何配合laravel更好的使用ajax
- 解释常用到的ajax参数
$.ajax({
url: "/test", //ajax请求地址
//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
cache: false,
//请求方式 "POST" 或 "GET"， 默认为 "GET"。
//注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
type:"GET",
dataType:"json", //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
//发送到服务器的数据，可以直接传对象{a:0,b:1}，
//如果是get请求会自动拼接到url后面，如：&a=0&b=1
//如果为数组，jQuery 将自动为不同值对应同一个名称。
//如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
data:{},
//发送请求前可修改 XMLHttpRequest 对象的函数，
//如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
//这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
beforeSend:function(xhr){
//this 默认为调用本次AJAX请求时传递的options参数
},
//请求成功后的回调函数
success: function(data,textStatus){
//this 调用本次AJAX请求时传递的options参数 ,
//如果设置context来改变了this，那这里的this就是改变过的
},
//请求失败时调用此函数。有以下三个参数：
//XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
//如果发生了错误，错误信息（第二个参数）除了得到null之外，
//还可能是"timeout", "error", "notmodified" 和 "parsererror"。
error:function(XMLHttpRequest, textStatus, errorThrown){
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
// this 调用本次AJAX请求时传递的options参数
},
//请求完成后回调函数 (请求成功或失败之后均调用)。
//参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
complete:function(XMLHttpRequest, textStatus) {
//this 调用本次AJAX请求时传递的options参数
},
//一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
statusCode:{
404:function(){
alert('404，页面不存在');
}
}
});
- jquery 的complete(XHR, TS)回调方法,可以理解为是响应的拦截器,而beforeSend可以理解为请求的拦截器
// todo ajax设置
$.ajaxSetup({
beforeSend: function (xhr) {
getToken('/blank_csrf_request', function (token) {
xhr.setRequestHeader('X-XSRF-TOKEN', token); // 设置请求头(同步请求)
});
},
complete: ajaxError || function () {
}
});
- complete 回调处理,没登录laravel中间件直接抛出401错误.ajax监听到进行登录页的跳转
var ajaxError = function (xhr) {
var status = xhr.status;
if (status === 401) {
// 未登录 跳转登录页
} else if (status === 403) {
// 其他错误 如商品收藏中的商品已下架
}else{
// todo 正常页面处理逻辑
// 如添加访问记录
}
};
除此之外还需在每个A类页面判断是否有权限访问,如无权限还应该显示待登录页面
其中A类页面为底部导航栏对应的页面,如下图中首页,我的都为A类页面.
image.png
- 两小时不点击系统报错,如何处理? 其实是CSRF失效不存在导致的问题
// todo 获取TOKEN
var getToken = function (url, callback) {
url = url || '/';
var XSRF_TOKEN = document.cookie.match(/(^| )XSRF-TOKEN=([^;]*)(;|$)/);
if (!XSRF_TOKEN || XSRF_TOKEN === "") {
//发送一个空请求(同步)以更新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中增加路由
//全局的一个空请求以更新cookie里的xsrf token
Route::get('blank_csrf_request', 'Front\IndexController@blank_csrf_request');
对应方法
//全局的一个空请求以更新cookie里的xsrf token
public function blank_csrf_request()
{
//该方法不需要做任何操作，自动会Set-Cookie:XSRF-TOKEN=...
return;
}
完