前言
ThinkPHP出于安全的考慮增加了表單令牌Token,由于通過Ajax異步更新數據僅僅部分頁面刷新數據,就導致了令牌Token不能得到更新,緊接著的第二次新建或更新數據(提交表單時)失敗——不能通過令牌的驗證。
當然了,最簡單的辦法就是刷新整個頁面,就導致了異步刷新的無意義!在網上搜尋了很多,有好幾種方法;看完覺得有一個最好:
Ajax異步動態請求創建新令牌并更新到本地
主要思路:在每次發送表單結束后(不管成功與否)通過Ajax異步請求一個新的表單令牌并保存到表單隱藏域中,下次提交表單就使用新的表單令牌去通過。
最終的效果如下:
V2.5.0.png
主要分成三步:
第一步:在Index控制器下創建生成Token的方法
之所以選擇在Index控制器下創建,主要考慮在整個admin(后臺)可以方便的引用該方法,不需要每次都根據控制器找尋相應的方法。也就是說,該方法其他控制器都可以引用!
<?phpnamespace app/admin/controller;use think/Controller;class Index extends Valid { // 生成token函數 public function getToken() { $request = /think/facade/Request::instance(); echo $request->token(); }}
第二步:在Javascript中創建Ajax獲取新令牌
由于后臺生成新令牌的地址已經固定了,也就是:
/admin/Index/,因此通過jQuery的Get方法容易獲取該令牌!
// 獲取新Token并更新function getNewToken() { $.get("/admin/Index/getToken", function(data) { document.getElementById("__token__").value = data; });}
第三步:在Html頁面中創建隱藏域保存令牌
其實在ThinkPHP的表單示例代碼中已經有了該代碼。頁面第一次加載時的令牌Token是隨著頁面分配的,后面的令牌就是通過Ajax獲取的!
<!-- 隱藏區域 --><input type="hidden" id="__token__" name="__token__" value="{$Request.token}" />
最后,我們就可以在javascript的相應提交表單的地方增加語句申請新令牌了!舉例,下面的示例代碼在提交后不管成功與否都申請了新的令牌。
/** * Ajax動態更新數據并異步刷新頁面 * @Author DuDongHua * @DateTime 2018-04-28T21:21:23+0800 * @param {對象} Button 表單按鈕對象 * @param {文本} Modal 模塊 * @param {文本} Controller 控制器 * @param {文本} Action 方法 * @param {文本} Location Ajax加載頁面的位置id * 使用方法:表單對象不用提交的任何設置,提交假按鈕<a>設置onclick即可 * 注意: * 1. 在javascript中拼接Thinkphp5的URL地址,不需要"{:url('" + Modal + "/" + Controller + "/" + Page + "')}方法 * 只需要直接拼接地址即可,如:var MeURL = '/'+Modal+'/'+Controller+'/'+Page; */function EditData(Button,Modal,Controller,Action,Location,Page){ // 設置默認參數 var Modal = arguments[1] ? arguments[1] : "admin"; // 模塊名 var Controller = arguments[2] ? arguments[2] : "index"; // 控制器 var Action = arguments[3] ? arguments[3] : "editData"; // 方法名 var Location = arguments[4] ? arguments[4] : "content"; // Ajax加載頁面的位置id var Page = arguments[5] ? arguments[5] : "index"; // Ajax加載頁面控制器中的方法 // 生成本頁面的url用于更新后異步刷新 var MeURL = '/'+Modal+'/'+Controller+'/'+Page; setLoaderIn(true); //打開加載圖標 // 異步請求數據 $.ajax({ url: '/'+Modal+'/'+Controller+'/'+Action, type: 'POST', data: $(Button).closest("form").serialize(), //表單序列化 dataType: 'json', success: function(data){ // 更新頁面并提示 // window.location.reload(); //當加載整個頁面時有效但ajax更新時加載到主頁 loadAjaxHTML(MeURL,Location); showMsg(data.msg); setLoaderIn(false); //關閉加載圖標 getNewToken(); // 獲取新Token }, error:function(XMLHttpRequest, textStatus, errorThrown){ showMsg(XMLHttpRequest.status+" "+XMLHttpRequest.readyState,textStatus,"red","#f60"); getNewToken(); // 獲取新Token } });}
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
圖片精選