Ajax----get和post请求

Ajax四个步骤

//创建对象
const xhr = new XMLHttpRequest;
//初始化，设置请求方法和 url
xhr.open('GET', 'http://baidu.com')
//发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
test.HTML = xhr.response;
}
}else{

}
}

        }

不同类型的请求及其作用

1. GET: 从服务器端读取数据（查）
2. POST: 向服务器端添加新数据 （增）
3. PUT: 更新服务器端已经数据 （改）
4. DELETE: 删除服务器端数据 （删）

jQuery中的Ajax

使用$.ajax()发起GET请求

$.ajax({
contentType:'application/json',
data:JSON.stringify(idListNum),
type: 'GET', // 请求的方式
url: 'http://www.liulongbin.top:3006/api/getbooks',  
// 请求的 URL 地址
data: { id: 1 },
// 这次请求要携带的数据
success: function(res) { 
// 请求成功之后的回调函数
console.log(res)
   }
})

使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可

使用Jquery发动Ajax请求遇到的问题：

1.Ajax get请求，URL拼接参数

提交参数的格式

 Ajax在url后携带参数，参数的值：${ }；

  $.ajax({
contentType:'application/json',
type: 'GET',
url: `http://ms.test.zi-chain.com/api/user/contact/detail?id=${idListNum}`,
success: function(res) {
}
 })
idListNum = [];
    }
}

2.Ajax异步改成 同步执行

async: false

$.ajax({
    type: "GET",
    url: "http://ms.test.zi-chain.com/api/base/minsu/comboBox",
    async: false,//ajax同步执行
    success : function(res) {}
    )}

3.注意接口要求的数据格式

一般都是json格式，除了对象就是字符串；

data中常用的两种json数据转换方式：

//把对象转换成json字符串返回值是json字符串
let 字符串 =  JSON.stringify(对象);
//把json字符串转成对象
let 对象 = JSON.parse(jso字符串);

Ajax请求中有关数据类型的配置：

contentType:'application/json'