jQuery - 自动给所有Ajax请求加上时间戳（全局参数修改）

2018-10-25 发布：hangge 阅读：7452

在使用 jQuery 请求数据时，我们可能希望它能自动附带上一些额外的参数。比如：

让所有请求自动加上时间戳，这样每次请求就不会有缓存。
或者让所有请求自动带上权限认证的 token，这样不用再为每个请求单独添加这个参数。

下面通过样例演示这个功能如何实现。

1，样例代码

（1）这里我们使用 jQuery 的 ajaxSetup() 方法来进行全局配置，该方法可以为将来所有的 AJAX 请求设置默认值。

（2）通过 ajaxSetup() 方法中的 beforeSend 属性可以设置发送请求前运行的函数（它会拦截所有的请求），我们在此对 url 进行修改，增加个时间戳参数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js" charset="utf-8"></script>
    <script type="text/javascript">
      //全局配置
      $.ajaxSetup({
        beforeSend: function(jqXHR, settings) {
            //在请求前给修改url（增加一个时间戳参数）
            settings.url += settings.url.match(/\?/) ? "&" : "?";
            settings.url += "token=" + new Date().getTime();
        },
      });

      //按钮点击响应
      function btnClick() {
        $.get("data.php", {name: "hangge"}, function(data){
          alert(data);
        });
      }
    </script>
  </head>
  <body>
    <input type="button" value="请求数据" onclick="btnClick()"/>
  </body>
</html>

2，效果图

点击“请求数据”按钮发起一个简单的get请求。可以看到虽然我们一开始只设置了name 这一个参数，但最终又自动添加了个 token（时间戳）参数。