jQuery的ajax封装函数

最新推荐文章于 2023-08-25 13:34:28 发布

原创最新推荐文章于 2023-08-25 13:34:28 发布 · 516 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript&jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种针对jQuery AJAX的封装方法，解决了频繁调用及不支持Promise的问题，方便后期维护。

阐述：

在开发的时候，我们会频繁调ajax，但是jQuery又不能使用promise，不遵循ES6的标准。所以很烦。
只能靠自己封装一下ajax来解决下ajax频繁写的过程。也便于日后维护。

封装ajax为函数代码如下

这里主要是做了post的封装，想要用get的自己效仿post即可。

http-request.js

/**
 * @author <winner>
 * ajax post 提交
 * @param url 请求地址
 * @param param 添加固定参数额外的参数。对象方式
 * @param datat 为html，datat，callback
 * @param callback 成功回调函数
 * @param errorCallback 失败回调函数
 * @rerun
 */
function httpRequestPost(url, param={}, datat, callback, errorCallback) {
  var pdata = {}
  pdata.AppType = "1";
  pdata.LoginKey = "9527";
  pdata.SystemID = "2";
  // 添加固定参数格外参数，合并为一个对象
  Object.assign(pdata,param)
  var json = JSON.stringify(pdata);
 $.ajax({
   type: "post",
   contentType: "application/json",
   url: url,
   data: json,
   dataType: datat,
   success: callback,
   error: errorCallback,
 })
}

使用函数

1、引用封装好的js

<script src="./js/http-request.js"></script>

2、使用封装好的函数调用接口

this.getUrl() 是接口请求地址，改成自己的即可。

var url = this.getUrl() + '/pi.User.getDevelopment.hf'
/*var data1 = {
    id: 123,
    name: 456
}*/
this.httpRequestPost(url, {}, 'json', function(res) {
    console.log("成功回调", res)
}, function(error) {
    console.log('错误回调', error)
})

jQuery的ajax封装函数源文件下载