1.1 $.get方法
用来发送get方式的ajax请求
$.get(var1, var2, var3, var4);
参数1: 请求的后端程序的地址
参数2: 要发送到后端程序的数据,json对象/js对象(推荐)或者 字符串
参数3: ajax请求成功时触发的回调函数,该函数中有一个参数,就是后端程序返回的数据
参数4: 设置返回数据的类型: text(默认) 、 json
参数4说明:
- 如果后端返回的是普通字符串(如: ‘Hello World’), 则设置为text或者不设置,默认为text
- 如果后端返回的是json字符串(如: ‘{“goods”:“华为 mate x”, price: 8999}’),则设置为json,函数内部会自动转为js对象
- 如果后端返回的是js/json对象,则不需要设置,就能接收成js对象形式
$.get('/getData', {name:'zs', age:20}, function (response) {
console.log(response);
}, 'json');
1.2 $.post方法
$.post 和 $.get 的用法一模一样,区别只是一个用来发送post请求另一个用来发送get请求
$post(var1, var2, var3, var4);
参数1: 请求的后端程序的地址
参数2: 要发送到后端程序的数据,json对象/js对象(推荐)或者 字符串
参数3: ajax请求成功时触发的回调函数,该函数中有一个参数,就是后端程序返回的数据
参数4: 设置返回数据的类型: text(默认) 、 json
$.post('/postData', {name:'zs', age:20}, function (response) {
console.log(response);
}, 'json');
1.3 $.ajax的基本用法
$.ajax使用JS对象来配置ajax请求 — $.ajax(obj);
必须配置项:
url: 要请求的后台程序地址
data: 要发送到后台程序的数据 (可以使用 字符串、js/json、FormData、 json字符串)
type: 请求类型 post 和 get 两种 (还有put、delete 等)
dataType: 后端返回的数据类型 text(默认) 、 json 、xml 、 jsonp (跨域使用)
success: 成功完成ajax触发的回调函数,其参数是后端程序的返回数据
$.ajax({
url: '/Data', // 请求的服务器端的url地址
type: 'get', // 请求方式
data: {name: 'zs'}, // 向服务器端发送的参数,可以是字符串、js对象、FormData对象
dataType: 'json', // 根据后端返回的数据来进行设置, text json xml scritp等等
success: function (result) {} //请求成功后触发的回调函数,result能够接收到后端返回数据
})
1.4 请求参##数的类型
请求参数data可以是三种类型的数据: 字符串、 js/json对象、FormData对象
- 当 content-type 为 application/x-www-form-urlencoded 时,可以设置成字符串或者 js/json对象。注意,application/x-www-form-urlencoded是默认模式,可以不进行设置
- contentType 就是用来设置 content-type 的
- js/json对象会自动转为字符串
- name=zs&age=20
- {name:“zs”, age"20} ==> name=zs&age=20 (ajax函数内部会将对象转为字符串)
- 后端使用 app.use(bp.urlencoded({extended: false})) 解析,req.body / req.body 接收
$.ajax({
url: '/datastr', // 请求的服务器端的url地址
type: 'get', // 请求方式
contentType: 'application/x-www-form-urlencoded',
data: {name: 'zs', age: 20},
dataType: 'json', // 根据后端返回的数据来进行设置
success: function (result) {} //请求成功后触发的回调函数,result能够接收到后端返回数据
})
- 当 content-type 为 application/json 时,data必须设置成json字符串
- JSON.stringify({name: ‘zs’, age: 20}) ===> ‘{“name”: “zs”, “age”: “20”}’
- 后端使用 app.use(bp.json()) 解析,req.body 接收
$.ajax({
url: '/datajson', // 请求的服务器端的url地址
type: 'get', // 请求方式
contentType: 'application/json',
data: JSON.stringify({name: 'zs', age: 20}),
dataType: 'json', // 根据后端返回的数据来进行设置
success: function (result) {} //请求成功后触发的回调函数,result能够接收到后端返回数据
})
- 当ajax请求发送到后端的参数为 FormData时,额外设置两个配置项为false
- contentType: false,
- processData: false,
- 后端使用 formidable 解析
$.ajax({
url: '/formdata', // 请求的服务器端的url地址
type: 'post', // 请求方式
data: fd,
dataType: 'json', // 根据后端返回的数据来进行设置
contentType: false,
processData: false,
success: function (result) {} //请求成功后触发的回调函数,result能够接收到后端返回数据
})
总结: conentType —> content-type
- application/x-www-form-urlencoded 可以使用 key1=valu1&key2=value2… 和 {key1:“value1”, key2:“value2”}
- application/json 可以使用 JSON.stringify({key1:value1, key2:value2})
- 如果发送数据类型为 FormData,则设置 contentType为false,processData为false
1.5 其他属性
- cache: 是否进行缓存(true缓存/fasle不缓存),如果设置type为get,一般设置该项为false(不缓存)
- async: 同步/异步设置,true(异步、默认) false(同步)
- timeout: 超时设置,多少ms之后扔未接收到后端返回数据,则结束本次请求。— 进入error方法中
IE浏览器的get请求有缓存问题
1.6 其他方法
- beforeSend: 发送ajax请求前触发的回调函数
- error: ajax请求产生失败时触发的回调函数。 该方法有三个参数,参数1是xhr对象,参数2是错误信息(错误信息通常是 “null”, “timeout”, “error”, “notmodified” 和 “parsererror”),参数3是异常对象
- complete: ajax请求完成时触发的回调函数
执行顺序: beforeSend --> success/error --> complete
1.7 serialize方法
一次性获取表单的所有数据(除了文件域)并拼接为 key1=value1&key2=value2&… 类型的字符串
该字符串可以直接作为参数发送给后端服务器
<form id="form">
username: <input type="text" name="username" value="Terry"><br>
password: <input type="text" name="password" value="123123"><br>
<input type="button" value="提交" id="btn"><br>
</form>
<script>
console.log($('#form').serialize()); //username=Terry&password=123123
</script>
1.8 $.ajax发送jsonp请求
视频: 04-使用$.ajax方法发送jsonp请求
$.post $.get . a j a x 都 能 发 送 跨 域 请 求 。 但 .ajax都能发送跨域请求。但 .ajax都能发送跨域请求。但.post和 . g e t 要 依 靠 c o r s 方 式 的 , 只 有 .get要依靠cors方式的,只有 .get要依靠cors方式的,只有.ajax能使用jsonp方式
核心:
- 必须设置请求类型为get — type: ‘get’ (因为jsonp请求是get方式的请求)
- 必须设置dataType为jsonp — dataType: ‘jsonp’ (告诉$.ajax方法,本次请求为jsonp请求)
- 必须额外设置一个jsonp参数,该参数值可以是任何英文字符串,默认 callback。 jsonp: ‘callback’ (用来向后端发送函数名)
- jsonpCallback: 手动设置前后端统一的函数名(一般不用)
示例:
- 使用jsonp发送跨域请求
$.ajax({
url: 'http://127.0.0.1:8888/getData', //请求的后端地址
type: 'get',
dataType: 'jsonp',
jsonp: 'callback', //解决前后端函数名统一的问题
success: function(msg){
alert(msg);
alert(msg.code);
alert(msg.message);
}
})
-
后端拼接函数字符串
app.get(’/getData’, (req, res) => {
//接收 callback 传递的函数名
const func = req.query.callback;//返回函数字符串 //jQuery33104429476805754784_1551344385977({code:200,message:"请求成功") res.send(func + '({code:200,message:"请求成功"})');
})