Ajax-POST请求

上文 Ajax-GET请求已经对Ajax做了简单的介绍，也分享了Ajax中GET数据请求的底层实现以及jQuery封装后的使用方式。那么本文再来记录一下Ajax中POST数据请求方式的底层实现和jQuery封装后的使用。Ajax最常用的请求服务器方式有GET和POST两种。GET 请求服务器方式常用于获取服务器数据，而 POST 请求服务器方式常用于向服务器发送数据，可携带参数量较大。本文主要介

廖若星辰LTY

25023人浏览 · 2021-09-01 22:02:05

廖若星辰LTY · 2021-09-01 22:02:05 发布

上文 Ajax-GET请求已经对Ajax做了简单的介绍，也分享了Ajax中GET数据请求的底层实现以及jQuery封装后的使用方式。那么本文再来记录一下Ajax中POST数据请求方式的底层实现和jQuery封装后的使用。

Ajax最常用的请求服务器方式有GET和POST两种。

GET 请求服务器方式常用于获取服务器数据，而 POST 请求服务器方式常用于向服务器发送数据，可携带参数量较大。本文主要介绍Ajax中的POST请求服务器的原生底层写法和jQuery封装后的用法。

使用XMLHttpRequest发起POST请求

使用XMLHttpRequest（简称：xhr）发起POST请求主要分五步：

1.创建XMLHttpRequest对象；

2.调用open函数，指定请求方式与URL地址；

3.设置 Content-Tyep 属性（固定写法）；

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

4.调用send函数，同时将数据以查询字符串的形式提交给服务器，发起Ajax请求；

5.监听 onreadystatechange 事件。

<script>
        // 1.创建xhr对象
        var xhr = new XMLHttpRequest();
        // 2.调用open函数，决定请求方式和URL地址
        xhr.open('POST', 'http://XXX');
        // 3.设置 Content-Tyep 属性（固定写法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 4.调用send，同时将数据以查询字符串的形式提交给服务器
        xhr.send('bookname=水浒传&author=施耐庵&publisher=北京图书出版社');
        // 5.监听 onreadystatechange 事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
</script>

注意：1.第三步设置 Content-Type 属性是固定写法，几乎不需要改的。而第五步回调函数中的if判断条件也是固定写法，也是不需要修改的；

2.POST请求方式因为主要是用于向服务器发送、提交数据的，所以必定是会携带参数的，参数是作为send()的形参传递的，而参数的格式是查询字符串格式，所以如果数据是以对象形式存储的，就需要使用到JSON.stringify()进行序列化操作将对象转换为JSON字符串格式。

ps：将JSON字符串转换为对象——JSON.parse(jsonStr)-这个把字符串转换为对象的操作也叫反序列化操作。

使用jQuery发起POST请求

<script>
    // 入口函数
    $(function () {
            // 直接发起$.post(URL, data, [callback])
            $.post('http://XXX',
                {    // data数据，要参考并符合api格式给定
                    bookname: '朝花夕拾',
                    author: '鲁迅',
                    publisher: '长江文艺出版社'
                },
                function (res) {    // 回调函数
                    console.log(res);
                }
            )
    })
</script>

注意：使用jQuery发起POST请求，直接调用 $.post(URL, data, [callback]) 即可，data数据是以对象形式给定的（因为jQuery底层封装时使用了JSON.stringify()将对象转换成了JSON字符串格式），URL和data都是必须项，callback为可选项。

上一篇：Ajax-GET请求

下一篇：jQuery-$.ajax()发起GET/POST请求