唯雪博客

自定义jQuery的ajax 拦截函数

      唯雪博客

一般前端都是在需要发请求的地方定义一个Ajax,可以在Ajax中定义请求的地址与请求方式,但是如果逐个定义Ajax请求,又逐个修个,那就非常繁琐,而且容易出错,所以可以根据需求定义一个统一的方法,放在公共的js文件中,只需要引入这个文件并修改开发与生产模式就可以了。

方法如下所示:

var whatMode = 'prod' // 指明使用开发模式还是生产模式的变量,可选值'dev'开发/'prod'生产
// obj对象有以下属性fake, url, succ, fail,在下方调用makeAction函数时会说明各个参数
var makeAction = function(obj) {
  if (whatMode === 'dev') {
    $.ajax({
      url: obj.fake,
      dataType: 'json',
      success: function (data) {
        obj.succ(data)
      },
      error: function(err) {
        obj.fail(err)
      }
    })
  } else if (whatMode === 'prod') {
     $.ajax({
      url: obj.url,
      async:obj.async,
      type:obj.type,
      data:obj.data,
      success: function (data) {
        obj.succ(data)
      },
      error: function(err) {
        obj.fail(err)
      }
    })
  }
}

然后再在需要发送Ajax的地方进行调用

makeAction({
   fake: 'json/data2.json', // 自己编的假数据的本地文件的路径地址
   url: urlData.ajaxurl,
   type:'GET',
   data:urlData.ajaxData,
   succ: function (result) {  // success回调函数
       console.log( result )
   },
   fail: function (err) { // error回调函数
       alert('页面数据请求失败')
   }
});


白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共2条评论
白俊遥博客

狂奔的熊二白俊遥博客写的不错,支持!

2017-12-01 12:28:17 回复

白俊遥博客

夏茉白俊遥博客不错赞一个

2017-12-01 11:37:00 回复