jquery项目中如何进行防重复提交

这篇文章给大家介绍jquery项目中如何进行防重复提交，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

在新项目中，axios能实现防重复提交的功能，不过老项目（例如jQuery）的项目中，没有axios。但是导入Ajax-hook
就可以实现

Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook

导入

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文件，亲测有效，朋友们可以后再测试一下，欢迎各路大神谈论和指出不足。

```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 {    // 其他浏览器    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({    //请求发起前进入    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代码：

      
This is index Page
  
    
/
    
index页面
    
404页面
    
info页面
    
nofound
  
  请求拦截器        

我的服务器使用koa2搭建的，代码如下：

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(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项目中如何进行防重复提交就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。