jquery專案中如何防重複提交詳解
阿新 • • 發佈：2021-11-09
在新專案中，axios能實現防重複提交的功能，不過老專案（例如）的專案中，沒有axios。但是匯入Ajax-hook
就可以實現JWCvT
Ajax-hook原始碼地址 : https://.com/wendux/Ajax-hook
匯入
<script src="https://unpkg.com/[email protected]/dist/ajaxhook.min."></script>
ah物件是在匯入ajaxhook.min.js後就會出現的，使用：
ah.proxy({
//請求發起前進入
onRequest: (config,handler) => {
console.log(config.url)
handler.next(config);
},//請求發生錯誤時進入，比如超時；注意，不包括http狀態碼錯誤，如404仍然會認為請求成功
onError: (err,handler) =&http://www.cppcns.com
其中，config.method為ajax請求的方式（GET/POST），config.url為請求的路徑。onError中的err物件和onResponse中的response可以通過err.config.method/response.config.method來獲得ajax的請求方式。
我稍微封裝了一下，實現防重複提交的js檔案，親測有效，朋友們可以後再測試一下，歡迎各路大神談論和指出不足。
```
function laodJS(url,callback) {
var script = document.createElement('script');
fn = callback || function() {};
script.type = 'text/script';
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()
}
},handler) => {
var id = err.config.method + err.config.url
if (ajaxArr.indexOf(id) !== -1) {
ajaxArr.splice(ajaxArr.indexOf(id),1)
}
handler.next(err)
},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><www.cppcns.com/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防重複提交內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！