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

引入jq

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

get请求 ——/拼接的方式

postman中的请求方式如图； 可以看出是通过**/拼接**的方式：图中，参数是直接拼接到url后面的，如果是query的方式，则格式为：url?id=1&name=‘张三’ 是这种的凡是，通过?和&拼接的方式：
具体浏览器中的情况如下图：

request url:是/拼接的方式，拼接的是一个变量
request method：GET
request headers里面的内容也是很重要的，这个地方决定着你的请求数据通过哪种格式传递给后端

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

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

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

图中的请求方式是Post，格式选择的是raw的格式，这个格式就是json
具体的浏览器请求如下图：

一定要注意：如果要传递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

暂时没有用到，后续用到会贴代码…
现在用到啦啦啦啦…——2023年12月12日用到了。。。。。

let formData = new FormData();
formData.append('storeId', '1');
formData.append('id', this.UserNo);
$.ajax({
    url: "/Home/LoginForIdJson",
    data: formData,
    type: "post",
    processData: false, //禁止序列化data，默认为true
    contentType: false, //避免JQuery对contentType做操作
    success: (d) => {
        xxxxxxx
    }
})

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

postman图： 传参通过query的方式，也就是上面提到的?id=1&name='张三’的方式

对应的浏览器请求图：

代码如下：

$.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图如下：

浏览器控制台请求图：

代码如下：

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