[JavaScript知识库]jQuery-$.ajax()发起GET/POST请求

Ajax能让我们轻松实现网页与服务器之间的数据交互。

Ajax的底层实现主要是用到浏览器中提供的XMLHttpRequest对象用法比较复杂，所以jQuery对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。

之前分享过了原生的Ajax发起GET和POST请求的写法以及使用jQuery封装后发起GET和POST请求的写法（查看可见文章底部直通车）。本文主要介绍使用jQuery封装后的Ajax可以使用$.ajax()直接发起GET和POST服务器请求。

首先：需要使用到jQuery所以肯定需要先为文件引入 jquery.js 的脚本。

使用$.ajax()发起GET请求

        // 入口函数
        $(function () {
            // 直接调用$.ajax()发起GET请求
            $.ajax({
                type: 'GET',    // 指定请求方式（大小写均可）
                url: 'http://XXX', // URL地址
                data: {    // 此次请求所携带的参数(GET请求可省略)
                    id: 1
                },
                success: function (res) {   // 回调函数
                    console.log(res);
                }
            })
        })

$.ajax()中的type属性的值：（默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

发起GET请求data参数可以省略（不是必选项）。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

使用$.ajax()发起POST请求

        // 入口函数
        $(function () {
            // 直接调用$.ajax()发起POST请求
            $.ajax({
                type: 'POST',    // 请求方式
                url: 'http://XXX',    // 请求的URL地址
                data: {    // 此次请求需要提交的数据（需按api接口格式给定）
                    bookname: '呐喊',
                    author: '鲁迅',
                    publisher: '长江文艺出版社'
                },
                success: function (res) {    // 回调函数
                    console.log(res);
                }
            })
        })

使用$.ajax()需要发起POST请求时，type属性值必须为POST（大小写均可），将此次请求需要提交的数据按api接口规定格式写入data属性值中，以对象键值对形式存储。

注意：ajax() 方法通过 HTTP 请求加载远程数据。

$.ajax([settings]) 的参数settings是可选的，是用于设置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。具体参数介绍详见：https://www.w3school.com.cn/jquery/ajax_ajax.asp

直通车：

Ajax-GET请求

Ajax-POST请求