AJAX学习笔记6 JQuery对AJAX进行封装

AJAX 学习笔记 5 同步与异步理解_biubiubiu0706 的博客 -CSDN 博客

AJAX 请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送 ajax 请求的话，就直接调用这个工具类中的相关函数即可。

用 JS 发送 AJAX 请求回顾

    
    




 发送 GET 无参 

 发送 GRT 有参 


 发送 POST 有参 

响应结果一般是个字符串    也有可能是 responseXML   

一般现在都用 JSON 字符串

那么需要转成 JS 对象

JSON.parse(this.responseText)

使用 JQuery 工具类中的 AJAX 方法来发送请求

引入

$.ajax() 是 jQuery 提供的一个通用 AJAX 请求方法.

$.get() 是 $.ajax() 方法的一个简化版本，专门用于发送 GET 请求。

$.post() 是 $.ajax() 方法的一个简化版本，专门用于发送 POST 请求。

示例

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

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

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

$.ajax() 比较通过, 可以发送 put,delete 请求  但是 $.get() 和 $.post() 是简化版, 暂没有 $.put 和 $.delete 的写法

下面来完整的写几个示例

$.get() 的写法

    
    





 发送 AJAX GET 请求 

用户名:

如果不想带参数, 就把参数去掉

$.ajax() 写法

    
    




 发送 AJAX GET 请求 

用户名:

后端随便返回点啥

发送 $.post   无参请求

发送 $.ajax()post 有参数请求

注意

$.get() 或者 $.post() 方法默认发送的请求是异步的。

如果希望发送的请求可以改变同步或者异步   建议使用 $.ajax() 这种方式

用 $.ajax() 方式发送请求的示例