理解Ajax与jQuery的GET和POST请求-CSDN博客

本文链接：https://blog.csdn.net/weixin_45998300/article/details/123191253

1.客户端与服务器的通信过程

2.$.get()

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

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

2.1不带参数：

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

2.2带参数：

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
    console.log(res)
})

3.$.post()

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

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

$(function() {
            $('#btn1').on('click', function() {
                $.post(
                    'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
                    {
                        bookname: '水浒传',
                        author: '施耐庵',
                        publisher: '上海图书出版社'
                    }, // 提交的数据
                    function(res) { // 回调函数
                        console.log(res)
                    }
                )
            })
        })