Ajax原生的Ajax、JQuery封装的Ajax

武飞扬头像

努力的旋转菠萝

2024-04-03 帮助1人

目录

JQuery封装的Ajax

原生的Ajax

1、创建Ajax实例对象---let xhr = new XMLHttpRequest();

2、打开一个连接---xhr.open(请求方式，请求路径)，其中请求方式为必填参数

①get请求：地址栏请求字符串，要用qs转换js对象---Qs.stringify()

②post请求：参数携带在请求体send()中

设置请求头为表单格式，发送请求时要用qs转换js对象---Qs.stringify()

设置请求头为JSON格式，发送请求时要用JSON转换js对象---JSON.stringify()

3、发送请求---xhr.send();

4、接收响应---xhr.onreadystatechange = function(){ }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/qs-6.9.4.js"></script>
</head>
<body>
<script>
// 1、创建ajax实例对象
let xhr = new XMLHttpRequest();
// 2、打开一个连接，参数：请求方式请求路径，请求方式必须要写
// 第一种：get有参请求，地址栏查询字符串,使用qs进行转换
let params={
page:1,
pageSize:10
};
let qs=Qs;
let qsObj=qs.stringify(params);
console.log(qsObj,'查询字符串');
xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll' '?' qsObj);
// 3、发送请求
xhr.send();
// 第二种：post有参请求,参数携带在请求体中
xhr.open('post','http://121.199.0.35:8888/index/carousel/findAll');
// post-1:设置请求头---表单格式数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3、发送请求
xhr.send(qs.stringify({id:1,name:'zhangsan'}));
// post-2:设置请求头---json格式数据
xhr.setRequestHeader('Content-Type','application/json');
// 3、发送请求
xhr.send(JSON.stringify({id:1,name:'zhangsan'}));
// 4、接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
}
</script>
</body>
</html>

学新通

JQuery封装的Ajax

参数：

1、请求路径：url

2、请求方式：method，默认发送get请求

3、携带参数：data

①get请求：要用qs转换js对象---Qs.stringify()

②post请求

设置请求头为表单格式，发送请求时要用qs转换js对象---Qs.stringify()

设置请求头为JSON格式，发送请求时要用JSON转换js对象---JSON.stringify()

4、成功回调：success(res){ }

5、失败回调：error(err){ }

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhfkahak

系列文章

同类精品

继续加载