jQuery中发起 ajax 请求,自己封装get请求
jQuery中发起 ajax 请求
参数:1.请求地址 2.参数 3.回调函数(参数为响应数据)
//get请求参数拼接到url中
$.get("http//127.0.0.1:8000", { a: 100, b: 200 }, (res) => {
console.log(res);
});
//post请求参数携带在请求体中
$.post("http//127.0.0.1:8000", { a: 100, b: 200 }, (res) => {
console.log(res);
});
通用方式
传入一个对象,指定请求地址、参数、请求方法、回调函数等
$.ajax({
url: "http://127.0.0.1:88e0/jquery-server", // 请求地址url
data: { a: 100, b: 200 }, //参数
type: "GET", //请求方法
//成功的回调
success: function (res) {
console.log(res);
},
});
此外还可以设置 请求头、响应数据的格式、超时时间、失败的回调函数等
$.ajax({
url: "http://127.0.0.1:88e0/jquery-server", // 请求地址url
data: { a: 100, b: 200 }, //参数
type: "GET", //请求方法
dataType: "json", //会自动序列化响应的数据
//成功的回调
success: function (res) {
console.log(res);
},
timeout: "2000", //超时时间
//错误的回调,网络错误、请求超时等
error: function () {
console.log("出错了!");
},
//设置请求头
header: {
a: 100,
b: 200,
},
});
get请求封装
//封装get请求 请求地址 请求的参数 回调函数 static get(url,param={},callback){ if(!url){ throw new Error('url地址必须要填入') } //参数解析 ?key=value&key1=value1 // 遍历param对象 for(let key in param){ //url里面如果存在? if(url.includes('?')){ url += `&${key}=${param[key]}` }else{ url += `?${key}=${param[key]}` } } let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP") xhr.open('get',url) xhr.send() xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){ let response = JSON.parse(xhr.responseText) if(callback instanceof Function){ callback(response) } } } }