基于jQuery的ajax的封装

在项目中,特别是没有用vue或是一些其他的大型前端框架时,发请求一般采用jQuery提供的ajax方法,请求很多时,就需要将ajax封装为一个公共方法用来减少代码冗余,这里使用promise对象来处理返回数据。

1、get请求的封装

其实几个请求的封装大同小异,get请求会详细作为例子详细描述。

var baseUrl = "基地址"; //用于拼接之后请求的url
//全局公共请求方法
var funAjax = {
  get: (url, async, data, method = "get") => {
    return new Promise((resolve, reject) => {
      // 这里可以使用一些小的插件来显示正在请求
      // 加载中动画开启
      //设置默认异步请求 
      /*此处同步请求: 同步请求(Synchronous Request):在发送请求时,JavaScript 引擎会等待请求完成并且收到响应,然后才会继续执行后续的代码。执行阶段会被阻塞,直到接收到请求的结果。这意味着,同步请求会阻塞后续的代码执行,直到请求完成,页面可能会出现“假死”状态。同步请求不适用于长时间的操作,因为它会冻结页面并阻塞用户的交互,异步请求则不用等待返回结果,根据情况设置参数
*/
      if (async == "" || async == null || typeof async == "undefined") {
        async = true;
      }
      $.ajax({
        url: baseUrl + url,
        type: method,
        async: async,
        dataType: "json",
        data: JSON.stringify(data),
        headers: {
          Token: localStorage.getItem("token"), //自定义请求头 此处我的token配置自动获取。根据自己配置位置进行获取
          "Content-Type": "application/json;charset=utf8",
        },
        success: function (ret) {
          // 加载中动画关闭
          // loading && loading.close();
          if (ret.code == 200) {
            resolve(ret);
          } else {
            if (ret.code == 401) { 
           //给用户提示登录超时,您需要重新登录 并返回登录页面,清
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQueryajax封装主要分为三个步骤。首先,需要引入jQuery库。然后,通过代码实例来讲解。最后,根据代码注释来理解封装过程。 具体来说,封装的步骤如下: 1. 第一步:引入jQuery库。用户需要在页面中引入jQuery的库文件,可以通过以下方式引入: ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 这样就可以在页面中使用jQuery的功能了。 2. 第二步:使用jQueryajax方法进行封装。用户可以通过以下代码将ajax请求进行封装: ``` $('#id').click(function(){ $.ajax({ url: "http://localhost:3000/ind", type: "post/get", data: $('form').serialize(), dataType: 'json', success: function(result){ // 请求成功后的回调函数,result中存放的是服务器的响应数据 }, error: function(err){ console.log(err); } }); }); ``` 在这段代码中,通过给一个元素绑定点击事件,当该元素被点击时,发起ajax请求。可以根据实际需求,修改url、type、data等参数来满足不同的请求。 3. 第三步:高层封装。除了使用jQueryajax方法,还可以使用高层封装的post请求实现简洁的代码,代码如下: ``` $.post(url, [data], [callback], [type]); ``` 其中,url是请求的地址,data是待发送的参数,callback是请求成功后的回调函数,type是返回内容的格式。 综上所述,jQueryajax封装通过引入jQuery库、使用ajax方法进行封装以及高层封装来实现。这样可以简化代码,提高开发效率。同时,原生的Ajax也是一种封装方式,可以使用XMLHttpRequest对象来发送异步请求,通过open方法建立与服务器的连接,设置请求头信息,然后通过send方法向服务器发送请求,并通过onreadystatechange事件监听请求-响应状态的改变,并将响应信息写入页面。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值