jQuery中AJAX请求常见常用的几种方法

绝地灬酷狼 2023-10-06 03:29 4阅读 0赞

**前言:原生的AJAX请求在原生JavaScript中发送，十分繁琐，使用jQuery会更加简洁快速。**

### **原生AJAX请求** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70][]

###  ###

### JQuery中的AJAX请求 ###

**1.$.ajax 方法**

**url 表示请求的地址**

**type 表示请求的类型 GET 或 POST 请求**

**data 表示发送给服务器的数据格式有两种： 一：name=value&name=value 二：\{key:value\}**

**success 请求成功，响应的回调函数**

**dataType 响应的数据类型 常用的数据类型有： text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 1][]

**2. $.get 方法和$.post 方法**

**url 请求的url地址**

**data 发送的数据**

**callback 成功的回调函数**

**type 返回的数据类型**

**因为get或post已经写明了请求的类型，所以不用传入type参数了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 2][]

**$.getJSON 方法**

**url 请求的 url 地址**

**data 发送给服务器的数据**

**callback 成功的回调函数**

**与之前同理，写明了请求的类型并且写明返回的数据类型，因此可以少传两个参数。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 3][]

**表单序列化 serialize()  
serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616140708885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200616141023820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020061614122870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020061614142993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200616141503152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1OTU3NA==,size_16,color_FFFFFF,t_70