jquery項目中如何防重復提交詳解
在新項目中,axios能實現防重復提交的功能,不過老項目(例如jQuery)的項目中,沒有axios。但是導入Ajax-hook
就可以實現
Ajax-hook源碼地址 : https://github.com/wendux/Ajax-hook
導入
<script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script>
ah對象是在導入ajaxhook.min.js後就會出現的,使用:
ah.proxy({ //請求發起前進入 onRequest: (config, handler) => { console.log(config.url) handler.next(config); }, //請求發生錯誤時進入,比如超時;註意,不包括http狀態碼錯誤,如404仍然會認為請求成功 onError: (err, handler) => { console.log(err.type) handler.next(err) }, //請求成功後進入 onResponse: (response, handler) => { console.log(response.response) handler.next(response) } })
其中,config.method為ajax請求的方式(GET/POST),config.url為請求的路徑。onError中的err對象和onResponse中的response可以通過err.config.method/response.config.method來獲得ajax的請求方式。
我稍微封裝瞭一下,實現防重復提交的js文件,親測有效,朋友們可以後再測試一下,歡迎各路大神談論和指出不足。
```javascript function laodJS(url, callback) { var script = document.createElement('script'); fn = callback || function() {}; script.type = 'text/javascript'; script.defer = true; // IE if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadystatechange = null; fn(); } } } else { // 其他瀏覽器 script.onload = function() { fn(); } } script.src = url; document.getElementsByTagName('body')[0].appendChild(script); } laodJS('https://unpkg.com/[email protected]/dist/ajaxhook.min.js', function() { let ajaxArr = [] ah.proxy({ //請求發起前進入 onRequest: (config, handler) => { var id = config.method + config.url if (ajaxArr.indexOf(id) === -1) { // 給每個請求設置唯一ID,push到ajaxArr裡。在請求完成時再移除那個項 ajaxArr.push(id) handler.next(config); } else { return handler.reject() } }, //請求發生錯誤時進入,比如超時;註意,不包括http狀態碼錯誤,如404仍然會認為請求成功 onError: (err, handler) => { var id = err.config.method + err.config.url if (ajaxArr.indexOf(id) !== -1) { ajaxArr.splice(ajaxArr.indexOf(id), 1) } handler.next(err) }, //請求成功後進入 onResponse: (response, handler) => { var id = response.config.method + response.config.url if (ajaxArr.indexOf(id) !== -1) { ajaxArr.splice(ajaxArr.indexOf(id), 1) } handler.next(response) } }) })
直接在全局中引入這個文件就可以瞭,我這個文件命名為preventRepeatSubmission.js。
我的HTML代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>This is index Page</h1> <ul> <li><a href="/">/</a></li> <li><a href="/index">index頁面</a></li> <li><a href="/404">404頁面</a></li> <li><a href="/info">info頁面</a></li> <li><a href="/nofound">nofound</a></li> </ul> <button id="sendMsg">請求攔截器</button> <script src="./jquery.min.js"></script> <!-- <script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script> --> <script src="./preventRepeatSubmission.js"></script> <script> document.getElementById("sendMsg").addEventListener("click", function() { $.ajax({ url: 'http://localhost:3000/home', type: 'GET', success: function(data) { console.log('success', data) } }) }) </script> </body> </html>
我的服務器使用koa2搭建的,代碼如下:
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); router .get('/', (ctx, next) => { ctx.body = '<h1>hello jspang</h1>'; }) .get('/home', async (ctx, next) => { // ctx.body = '<h1>This is home Page</h1>' async function delay(time) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(); }, time); }); }; await delay(5000); const url = ctx.url; // 在request中獲取get請求參數 const request = ctx.request; const request_query = request.query; const request_querystring = request.querystring; // 在ctx中獲取get請求的參數 const ctx_query = ctx.query; const ctx_querystring = ctx.querystring; ctx.body = {url, request_query, request_querystring, ctx_query, ctx_querystring}; ctx.response.body = {status:200, msg:'已經成功獲得參數'}; }) app .use(router.routes()) // 向app中裝載路由 .use(router.allowedMethods()) // 裝載中間件 app.listen(3000, () => { console.log('[Demo] is running at port 3000'); });
瀏覽器測試效果:
按下圖中的button就會發起一次ajax請求,我的服務器是延遲響應5s的,在這延遲5s期間,我有點擊瞭20次button,發起相同的20次ajax被成功攔截瞭,效果不錯。
總結
到此這篇關於jquery項目中如何防重復提交的文章就介紹到這瞭,更多相關jquery防重復提交內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- jQuery中ajax的相關知識點匯總
- axios概念介紹和基本使用
- AJAX請求以及解決跨域問題詳解
- Ajax解決跨域之設置CORS響應頭實現跨域案例詳解
- Ajax 的初步實現(使用vscode+node.js+express框架)