在 jQuery中 已经封装好了 ajax请求
不用考虑 兼容,跨域等问题, jQuery全都都已经解决了
只需要在设定请求时,设定不同的参数,就可以完成不同的请求
jQuery中 封装的 ajax请求 有3种
1, get请求方式
$.get()
参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
参数的形式是对象形式
$.get({
url : 地址(必填)
data : 携带的参数 对象形式
dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
success : function(){} 请求成功时执行的函数 })
<body>
<h1>get请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
$('button').click(function(){
$.get({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'张三' , pwd:123456},
// 没有设定 dataType 参数,res中的响应体
// 后端给什么,res中,就存储什么
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
'msg' => '请求的方式是get,就不查询数据库了,直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);
2, post请求方式
$.post()
参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
参数的形式是对象形式
$.post({
url : 地址(必填)
data : 携带的参数 对象形式
dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
success : function(){} 请求成功时执行的函数
})
<body>
<h1>post请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
$('button').click(function(){
$.post({
// 对 url 地址的PHP文件发起请求
url : './post.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'张三' , pwd:123456},
// 没有设定 dataType 参数,res中的响应体
// 后端给什么,res中,就存储什么
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$arr = [
'msg' => '您请求的方式是post,我就不查询数据库了,直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);
3, $.ajax() 综合方式
参数有 N 个参数,特别特别多,逐一介绍
常规get,post请求(不是跨域),常用参数
$.ajax({
常用:
url : 地址;
type / method : 请求方式 默认值是get方式
data : { } 传参参数,必须是对象形式
dataType : json, 设定为json,会自动解析反应提中的json串
success : function(){} 请求成功执行的函数
不常用:
async : 设定是否异步,默认值是true,异步执行ajax请求
error : function(){} 请求错误时执行的函数
请求成功时不会执行
timeout : 设定时间,单位 毫秒
如果请求时间超过设定的时间,认为是请求失败
必须是异步执行
cache : 设定是否缓存请求结果
默认值是 true,缓存请求结果
必须是get方式,这个设定才起作用
post方式不会缓存,设定也没有效果
context : 指定 执行函数中 this的指向
})
<body>
<h1>ajax请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
const obj = {};
$('button').click(function(){
$.ajax({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求方式,不写就是,默认值get.
type: 'get',
// data传参参数
data : {name:'张三',pwd:123456},
// dataType, 设定 json 解析响应体的json串
dataType : 'json',
success : function(res){
console.log(res);
console.log(this);
},
// 不常用的
// async : false, // 设定异步
// 请求成功不执行,请求失败才执行
error : function(res){
console.log(res)
},
// timeout : 1, // 超市报错,但是必须是异步执行
cache : false, // 如果是不缓存,会在数据后有一个 _数值 的时间戳
// 告诉程序,这个结果的获取时间
context : obj , // this默认指向 ajax对象 , 可以设定this的指向
})
console.log('我是同步执行的程序');
})
</script>
</body>
<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
'msg' => '请求的方式是get,就不查询数据库了,直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);