Shulou(Shulou.com)06/02 Report--

This article introduces how to prevent repeated submission in the jquery project. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

In new projects, axios can implement the function of preventing repeated submissions, but in old projects (such as jQuery), there is no axios. But import Ajax-hook

It can be realized.

Ajax-hook source code address: https://github.com/wendux/Ajax-hook

Import

The ah object appears after the ajaxhook.min.js is imported, using:

Ah.proxy (enter onRequest: (config, handler) = > {console.log (config.url) handler.next (config);}, / / enter when an error occurs in the request, such as timeout Note that http status code error is not included. For example, 404 will still consider the request to be successful onError: (err, handler) = > {console.log (err.type) handler.next (err)}, / / enter onResponse: (response, handler) = > {console.log (response.response) handler.next (response)}} after a successful request)

Where config.method is the method of ajax request (GET/POST) and config.url is the path of the request. The err object in onError and the response in onResponse can obtain the request method of ajax through err.config.method/response.config.method.

I encapsulated a little bit to achieve anti-repeated submission of js files, personal test is effective, friends can test again later, welcome all gods to talk about and point out deficiencies.

````javascriptfunction 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 {/ / other browsers script.onload = function () {fn ();}} script.src = url; document.getElementsByTagName ('body') [0] .appendChild (script) } laodJS ('https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js', function () {let ajaxArr = [] ah.proxy ({/ / enter onRequest: (config, handler) = > {var id = config.method + config.url if (ajaxArr.indexOf (id) = =-1) {/ / set a unique ID,push to ajaxArr for each request. Remove that item ajaxArr.push (id) handler.next (config) when the request is completed;} else {return handler.reject ()}}, / / enter when an error occurs in the request, such as timeout Note that http status code errors are not included For example, 404 will still think that the request is successful 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)}, / / enter onResponse: (response) after the request is successful Handler) = > {var id = response.config.method + response.config.url if (ajaxArr.indexOf (id)! =-1) {ajaxArr.splice (ajaxArr.indexOf (id), 1)} handler.next (response)})})

It's OK to import this file directly in the global. My file is named preventRepeatSubmission.js.

My HTML code:

Document This is index Page / index page 404 info page nofound request interceptor document.getElementById ("sendMsg") .addEventListener ("click", function () {$.ajax ({url: 'http://localhost:3000/home', type:' GET', success: function (data) {console.log ('success') Data)}})})

My server is built with koa2 and the code is as follows:

Const Koa = require ('koa'); const Router = require (' koa-router'); const app = new Koa (); const router = new Router (); router. Get ('/', (ctx, next) = > {ctx.body = 'hello jspang' ) .get ('/ home', async (ctx, next) = > {/ / ctx.body = 'This is home Page' async function delay (time) {return new Promise (resolve, reject) {setTimeout (function () {resolve ();}, time);});}; await delay (5000); const url = ctx.url / / get get request parameters const request = ctx.request; const request_query = request.query; const request_querystring = request.querystring; / / get get request parameters const ctx_query = ctx.query; const ctx_querystring = ctx.querystring; ctx.body = {url, request_query, request_querystring, ctx_query, ctx_querystring} in ctx in request Ctx.response.body = {status:200, msg:' has successfully obtained the parameter'};}) app .use (router.routes ()) / / load routing .use (router.allowedMethods ()) / / load middleware app.listen (3000, () = > {console.log ('[Demo] is running at port 3000');})

Browser test results:

Press the button in the figure below to initiate an ajax request, and my server has a delayed response of 5 seconds. During this delay of 5 seconds, I clicked on button 20 times, and the same 20 times of ajax was successfully blocked, with good results.

On how to prevent repeated submission in the jquery project to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.