溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery項(xiàng)目中如何進(jìn)行防重復(fù)提交

發(fā)布時(shí)間：2021-11-08 12:46:59 來(lái)源：億速云 閱讀：149 作者：柒染 欄目：開(kāi)發(fā)技術(shù)

這篇文章給大家介紹jquery項(xiàng)目中如何進(jìn)行防重復(fù)提交，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在新項(xiàng)目中，axios能實(shí)現(xiàn)防重復(fù)提交的功能，不過(guò)老項(xiàng)目（例如jQuery）的項(xiàng)目中，沒(méi)有axios。但是導(dǎo)入Ajax-hook
就可以實(shí)現(xiàn)

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

導(dǎo)入

<script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script>

ah對(duì)象是在導(dǎo)入ajaxhook.min.js后就會(huì)出現(xiàn)的，使用：

ah.proxy({
    //請(qǐng)求發(fā)起前進(jìn)入
    onRequest: (config, handler) => {
        console.log(config.url)
        handler.next(config);
    },
    //請(qǐng)求發(fā)生錯(cuò)誤時(shí)進(jìn)入，比如超時(shí)；注意，不包括http狀態(tài)碼錯(cuò)誤，如404仍然會(huì)認(rèn)為請(qǐng)求成功
    onError: (err, handler) => {
        console.log(err.type)
        handler.next(err)
    },
    //請(qǐng)求成功后進(jìn)入
    onResponse: (response, handler) => {
        console.log(response.response)
        handler.next(response)
    }
})

其中，config.method為ajax請(qǐng)求的方式（GET/POST），config.url為請(qǐng)求的路徑。onError中的err對(duì)象和onResponse中的response可以通過(guò)err.config.method/response.config.method來(lái)獲得ajax的請(qǐng)求方式。

我稍微封裝了一下，實(shí)現(xiàn)防重復(fù)提交的js文件，親測(cè)有效，朋友們可以后再測(cè)試一下，歡迎各路大神談?wù)摵椭赋霾蛔恪?/p>

```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/ajax-hook@2.0.3/dist/ajaxhook.min.js', function() {
  let ajaxArr = []
  ah.proxy({
    //請(qǐng)求發(fā)起前進(jìn)入
    onRequest: (config, handler) => {
      var id = config.method + config.url
      if (ajaxArr.indexOf(id) === -1) {
        // 給每個(gè)請(qǐng)求設(shè)置唯一ID，push到ajaxArr里。在請(qǐng)求完成時(shí)再移除那個(gè)項(xiàng)
        ajaxArr.push(id)
        handler.next(config);
      } else {
        return handler.reject()
      }
    },
    //請(qǐng)求發(fā)生錯(cuò)誤時(shí)進(jìn)入，比如超時(shí)；注意，不包括http狀態(tài)碼錯(cuò)誤，如404仍然會(huì)認(rèn)為請(qǐng)求成功
    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)
    },
    //請(qǐng)求成功后進(jìn)入
    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)
    }
  })
})

直接在全局中引入這個(gè)文件就可以了，我這個(gè)文件命名為preventRepeatSubmission.js。

我的HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h2>This is index Page</h2>
  <ul>
    <li><a href="/">/</a></li>
    <li><a href="/index">index頁(yè)面</a></li>
    <li><a href="/404">404頁(yè)面</a></li>
    <li><a href="/info">info頁(yè)面</a></li>
    <li><a href="/nofound">nofound</a></li>
  </ul>
  <button id="sendMsg">請(qǐng)求攔截器</button>
  <script src="./jquery.min.js"></script>
  <!-- <script src="https://unpkg.com/ajax-hook@2.0.3/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>

我的服務(wù)器使用koa2搭建的，代碼如下：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

router
  .get('/', (ctx, next) => {
    ctx.body = '<h2>hello jspang</h2>';
  })
  .get('/home', async (ctx, next) => {
    // ctx.body = '<h2>This is home Page</h2>'
    async function delay(time) {
      return new Promise(function(resolve, reject) {
        setTimeout(function(){
          resolve();
        }, time);
      });
    };
    await delay(5000);
    const url = ctx.url;
  
    // 在request中獲取get請(qǐng)求參數(shù)
    const request = ctx.request;
    const request_query = request.query;
    const request_querystring = request.querystring;

    // 在ctx中獲取get請(qǐng)求的參數(shù)
    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:'已經(jīng)成功獲得參數(shù)'};
  })

app
  .use(router.routes())   // 向app中裝載路由
  .use(router.allowedMethods())   // 裝載中間件

app.listen(3000, () => {
  console.log('[Demo] is running at port 3000');
});

瀏覽器測(cè)試效果：

jquery項(xiàng)目中如何進(jìn)行防重復(fù)提交

按下圖中的button就會(huì)發(fā)起一次ajax請(qǐng)求，我的服務(wù)器是延遲響應(yīng)5s的，在這延遲5s期間，我有點(diǎn)擊了20次button，發(fā)起相同的20次ajax被成功攔截了，效果不錯(cuò)。

關(guān)于jquery項(xiàng)目中如何進(jìn)行防重復(fù)提交就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手