Ajax和JSON-学习笔记02【JQuery方式实现Ajax】

秒速五厘米 2022-10-30 13:24 192阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Ajax和JSON-学习笔记01【原生JS方式实现Ajax】][Ajax_JSON-_01_JS_Ajax]
> 2.  [Ajax和JSON-学习笔记02【JQuery方式实现Ajax】][Ajax_JSON-_02_JQuery_Ajax]
> 3.  [Ajax和JSON-学习笔记03【JSON\_基础语法】][Ajax_JSON-_03_JSON]
> 4.  [Ajax和JSON-学习笔记04【JSON\_解析器】][Ajax_JSON-_04_JSON]

**目录**

第2节 JQuery方式实现Ajax

AJAX\_实现\_JQuery实现方式\_ajax

AJAX\_实现\_JQuery实现方式\_get&post

get方式

post方式

get、post区别

--------------------

# 第2节 JQuery方式实现Ajax #

## AJAX\_实现\_JQuery实现方式\_ajax ##

> **AJAX**  
> 1. 概念  
> 2. 实现方式：  
>     1. 原生的JS实现方式（了解）  
>     2. JQeury实现方式  
>         1. $.ajax()  
>             \* 语法：$.ajax(\{键值对\});  
>         2. $.get()
> 
>         3. $.post()

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

> ![20210219190349542.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

## AJAX\_实现\_JQuery实现方式\_ajax ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

## AJAX\_实现\_JQuery实现方式\_get&post ##

> **AJAX**  
> 1. 概念  
> 2. 实现方式：  
>     1. 原生的JS实现方式（了解）  
>     2. JQeury实现方式  
>         1. $.ajax()  
>             \* 语法：$.ajax(\{键值对\});  
>              //使用$.ajax()发送异步请求  
>                 $.ajax(\{  
>                     url:"ajaxServlet1111" , // 请求路径  
>                     type:"POST" , //请求方式  
>                     //data: "username=jack&age=23",//请求参数  
>                     data:\{"username":"jack","age":23\},  
>                     success:function (data) \{  
>                         alert(data);  
>                     \},//响应成功后的回调函数  
>                     error:function () \{  
>                         alert("出错啦...")  
>                     \},//表示如果请求响应出现错误，会执行的回调函数  
>       
>                     dataType:"text"//设置接受到的响应数据的格式  
>                 \});  
>         2. $.get()：发送get请求  
>             \* 语法：$.get(url, \[data\], \[callback\], \[type\])  
>                 \* 参数：  
>                     \* url：请求路径  
>                     \* data：请求参数  
>                     \* callback：回调函数  
>                     \* type：响应结果的类型
> 
>         3. $.post()：发送post请求  
>             \* 语法：$.post(url, \[data\], \[callback\], \[type\])  
>                 \* 参数：  
>                     \* url：请求路径  
>                     \* data：请求参数  
>                     \* callback：回调函数  
>                     \* type：响应结果的类型

### get方式 ###

> ![20210219191324872.png][]
> 
> ![20210219191353751.png][]

### post方式 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

### get、post区别 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Ajax_JSON-_01_JS_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113863644
[Ajax_JSON-_02_JQuery_Ajax]: https://blog.csdn.net/weixin_44949135/article/details/113869026
[Ajax_JSON-_03_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870353
[Ajax_JSON-_04_JSON]: https://blog.csdn.net/weixin_44949135/article/details/113870817
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/398e1aaa69de47cc8bd353baa0998019.png
[20210219190349542.png]: https://img-blog.csdnimg.cn/20210219190349542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/d79809d6933345258ab5695f78683200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/dcf503f4fb3241b0bc5d8112371756bb.png
[20210219191324872.png]: /images/20221024/b3e4731ec5af48948adfc65f1b636ffd.png
[20210219191353751.png]: /images/20221024/1cdef723f62442e2963717ddfd9614c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/20bfbf1279b341ada8d7de660a0d4269.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/057be2c0986846f6817650f1374be9fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/d8c19e7a9b8842b8913c801424eca09e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/51a76361ab674127b95fac3a5ef4b261.png