jQuery中的Ajax方法

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 $.ajax都能发送跨域请求。但$.post和$.get要依靠cors方式的，只有$.ajax能使用jsonp方式

核心:

• 必须设置请求类型为get — type: ‘get’ (因为jsonp请求是get方式的请求)
• 必须设置dataType为jsonp — dataType: ‘jsonp’ (告诉$.ajax方法，本次请求为jsonp请求)
• 必须额外设置一个jsonp参数，该参数值可以是任何英文字符串，默认 callback。 jsonp: ‘callback’ (用来向后端发送函数名)
• jsonpCallback： 手动设置前后端统一的函数名（一般不用）

示例:

1. 使用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);
        }
    })

2. 后端拼接函数字符串

   app.get(’/getData’, (req, res) => {
   //接收 callback 传递的函数名
   const func = req.query.callback;

    //返回函数字符串
    //jQuery33104429476805754784_1551344385977({code:200,message:"请求成功")
    res.send(func + '({code:200,message:"请求成功"})');
   

   })