$.ajax的各种请求——get post put delete patch的具体用法及详细说明

迷南。 2021-07-25 23:10 350阅读 0赞

之前用vue的时候，接口数据请求部分的封装也都不是我处理的，因此这一块有很多坑，我都没有发现，现在需要用到了，因此记录一下：

## 引入jq ##

这个不用多说：cdn引入即可  
`<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>`

## get请求 ——/拼接的方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
postman中的请求方式如图； 可以看出是通过\*\*/拼接\*\*的方式：图中，参数是直接拼接到url后面的，如果是query的方式，则格式为：url?id=1&name=‘张三’ 是这种的凡是，通过?和&拼接的方式：  
具体浏览器中的情况如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
`request url`:是/拼接的方式，拼接的是一个变量  
`request method`：GET  
`request headers`里面的内容也是很重要的，这个地方决定着你的请求数据通过哪种格式传递给后端

上面的方式是最简单的：代码如下：

$.get(url + '/' + id, function (res) { 
      if (res.success) { 
      	//如果返回了数据应该做些什么……
      }
    })

## post/put请求——json格式传递参数 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
图中的请求方式是Post，格式选择的是raw的格式，这个格式就是json  
具体的浏览器请求如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
一定要注意：如果要传递json格式的数据，需要将`content-type`设置为`application/json`,这个是很关键的部分，然后通过JSON.stringfy(对象参数)的方式格式化之后传递

代码如下：

$.ajax({ 
      type: "PUT",//PUT一般是修改数据，POST一般是添加数据
      url: url,
      data: JSON.stringify(obj), //格式化数据
      contentType: "application/json", //指定格式为json,对应postman中的raw
      dataType: "json",//这个也是
      success: function (res) { 
          console.log(res);
          if (res.success) { 
              layer.msg('修改成功');
              parent.layer.close(1);
              window.parent.location.reload();
          } else { 
              layer.msg(res.message)
          }
      },
      complete: function () { 
          var index = parent.layer.getFrameIndex(window.name); //关闭弹层
          console.log(1111, index);
          parent.layer.close(index);
      }
    });
    $.ajax({ 
        type: "POST",
        url: url,
        data: JSON.stringify(obj),
        contentType: "application/json",
        dataType: "json",
        success: function (res) { 
            console.log(res);
            if (res.success) { 
                layer.msg('新增成功');
                parent.layer.close(1);
                window.parent.location.reload();
            } else { 
                layer.msg(res.message)
            }
        }
    });

## post/put请求——formData格式传递参数 ##

则需要改变`'Content-Type': 'application/x-www-form-urlencoded' // 不进行header设置的默认格式`  
对应postman中的这种格式：form-data  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
暂时没有用到，后续用到会贴代码

## patch请求——第一次用到…… ##

postman图： 传参通过query的方式，也就是上面提到的?id=1&name='张三’的方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
对应的浏览器请求图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]

代码如下：

$.ajax({ 
        type: "PATCH",
        url: url +"/ChangeOwner?strIds="+id+"&owner="+obj.person,//query的传参方式也是拼接
        contentType: "application/x-www-form-urlencoded",//注意这个地方：
        success: function (res) { 
            console.log(res);
            if (res.success) { 
                layer.msg('绑定成功');
                setTimeout(() => { 
                    parent.layer.close(1);
                    window.parent.location.reload();
                }, 500)
            } else { 
                layer.msg(res.message)
            }
        }
    });

## delete请求 ##

postman图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
浏览器控制台请求图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
代码如下：

$.ajax({ 
        type: 'delete',
        url: url + 'Supplier?id=' + id,
        success: function (res) { 
            layer.msg("删除成功");
            searchTable();
        }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/8b68499814584b32864f2c88645a609f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/200042b040f94fa0af319c0bb25a73a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/0d2321b7675d4e38a2f48df8c99e7ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/c03d335e60ad47a99c551340892d48d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/3955cafe2ebb472abe9dbf0c328f9d79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/d8c15b00d15b4469ae99b016be79a54b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/d181339144a24a2fa9b4510577adf967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/80fdd9caa9ed41c2889410da45f32d0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/94ce42f2b9e747ea857939d682aa37de.png