jQuery中Ajax的$.get()、$.post()、$.ajax()函数

（笔记，学的是黑马Ajax的教程day01）

目录

（一）、$.get()函数

（1.1）使用$.get()发起 不带参数 的请求

（1.2）使用$.get()发起 带参数 的请求

（二）、$.post()函数

post()语法

（2.1）$.post()向服务器提交数据

（三）、$.ajax() 函数

$.ajax()函数的基本语法

（3.1）使用$.ajax()发起get请求

（3.2）使用$.ajax()发起post请求

---

浏览器中提供的 XMLHttpRequest用法比较复杂 所以jQuery 对 XMLHttpRequest 进行了封装，提供了一系列的 Ajax相关的函数，极大的降低了Ajax的使用难度

jQuery中发起Ajax请求最常用的三个方法如下↓

• $.get()

• $.post()

• $.ajax()

（一）、$.get()函数

jQuery中的 $.get() 函数的功能单一，用来发起get（获取）请求，从而将服务器上的资源请求到客户端上来进行使用（从服务器获取资源）

语法：

$.get( url, [data] , [callback] )

中括号[] 代表的是可选参数，只有参数url是必选的

参数名	参数类型	是否必选	说明
url	string	是	要请求的 资源地址
data	object	否	请求资源期间要 携带的参数（发送到服务器）
callback	function	否	请求成功时的 回调函数

（1.1）使用$.get()发起 不带参数 的请求

使用 $.get() 函数发起不带参数的请求时，直接提供 请求的URL地址 和 请求成功之后的回调函数 即可，示例代码如下

​
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    console.log(res) // 这里的 res 是服务器返回的数据
})

​

举例

<button id="btnGET">发起不带参数的get请求</button>
    <script src="./jquery.js"></script>
    <script>
        // jquery的入口函数
        $(function () {
            $("#btnGET").on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) { //res代表服务器响应回来的数据
                    console.log(res);
                })
            })
        })
    </script>

（1.2）使用$.get()发起 带参数 的请求

使用 $.get() 函数发起带参数的请求时，示例代码如下

$.get('http://www.liulongbin.top:3006/api/getbooks', {id:1},function(res) {
    console.log(res) // 这里的 res 是服务器返回的数据
})

第一个参数是：请求的URL地址

第二个参数是：参数对象{}，需要传什么样的参数，以一个对象的形式来书写

第三个参数是：成功之后的回调函数

举例

  <button id="btn">发起一个带有参数的get请求</button>
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            $('#btn').on('click', function () {
                //请求ID为1的图书信息
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res);
                })
            })
        })
    </script>

（二）、$.post()函数

jQuery中 $.post()函数的功能单一，专门用来发起 post请求，从而向服务器提交数据

post()语法

$.post ( url , [data] , [callback] )

参数一：请求的URL地址

参数二：请求时候发送给服务器的数据

参数三：请求成功后的回调函数function

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

（2.1）$.post()向服务器提交数据

使用 $.post()向服务器提交数据的例子

调用post()指定三个参数，提交的数据用对象的形式{ }进行存储，回调函数用在提交成功后的调用

    <button class="btnPOST">发起POST请求</button>
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            $(".btnPOST").on("click", function () {
                $.post('http://www.liulongbin.top:3006/api/addbook', //请求的地址
                    { bookname: '水浒传', author: '施耐庵', publisher: '广西图书出版社' }, function (res) {
                        console.log(res);
                    })
            })
        })
    </script>

效果

在页面中点击btn按钮

 在调试工具是可以看到post请求的

（三）、$.ajax() 函数

相比于 $.get() 和 $.post() 函数，jQuery中提供的 $.ajax() 函数，是一个功能比较综合（即可get、也可post）的函数，它允许我们对Ajax请求进行更详细的配置

$.ajax()函数的基本语法

$.ajax({

type: ' '， //请求的方式，例如：get、post

url: ' '， //请求的URL地址

[data: { } ]， //这次请求要进行携带的数据

success: function(res){ } //请求成功之后的回调函数

})

属性名是要写的哦

（3.1）使用$.ajax()发起get请求

使用 $.ajax()发起get请求时，只需要将 type属性 的值 设置为 'GET' 即可 （GET可以是大写和小写，建议写大写）

    <button class="btnGET">使用$.ajax()发起get请求</button>
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            $('.btnGET').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1  //查询id为1的第一条信息
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>

这样就可以实现从这个url地址中get到了数据

 当然，data这个参数是可以省略的

        $(function () {
            $('.btnGET').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',

                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

这样子就获取到全部ID的图书了  

（3.2）使用$.ajax()发起post请求

使用 $.ajax()发起post请求时，只需要将 type属性 的值 设置为 'POST' 即可 （POST可以是大写和小写，建议写大写）

    <button class="btnPOST">$.ajax()发起post请求</button>
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            $('.btnPOST').on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: '史记',
                        author: '司马迁',
                        publisher: '广西图书出版社'
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

把type的值作为POST，data的数据是以对象存放的