js进阶 14-6 $.ajax()方法如何使用

一、总结

一句话总结：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

1、$.ajax()的特点是什么（和$.get()、$.post()的区别是什么）？

$.get,$.post为$.ajax()的封装

2、$.ajax()方法的参数是什么形式？

键值对

语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
参数
1. 第一个参数是我们希望请求的URL;
2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
常用参数：
1. url默认值：当前页地址。发送请求的地址。
2. type请求方式(“POST”或”GET”),默认为”GET”。
3. Success类型：Function请求成功后的回调函数。
4. error请求失败时调用此函数。
5. .........

16 <script type="text/javascript">
17     $(function(){
18         $(\'#btn\').click(function(){
19             $.ajax({
20                 type:\'POST\', //默认为GET方式提交
21                 url:\'testPost0.php\',
22                 data:{password:\'123456\'},
23                 success:function(responseTxt,statusTxt,xhr){
24                     alert(responseTxt)
25                 },
26                 error:function(){
27                     alert(\'加载失败\')
28                 }
29             })
30         })
31     })
32 </script>

二、$.ajax()方法如何使用

1、相关知识

$.ajax()

$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。

语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
参数
1. 第一个参数是我们希望请求的URL;
2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
常用参数：
1. url默认值：当前页地址。发送请求的地址。
2. type请求方式(“POST”或”GET”),默认为”GET”。
3. Success类型：Function请求成功后的回调函数。
4. error请求失败时调用此函数。
5. .........

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <input type="button" id="btn" value="Ajax测试">
15     <div id="test"></div>
16 <script type="text/javascript">
17     $(function(){
18         $(\'#btn\').click(function(){
19             $.ajax({
20                 type:\'POST\', //默认为GET方式提交
21                 url:\'testPost0.php\',
22                 data:{password:\'123456\'},
23                 success:function(responseTxt,statusTxt,xhr){
24                     alert(responseTxt)
25                 },
26                 error:function(){
27                     alert(\'加载失败\')
28                 }
29             })
30         })
31     })
32 </script>
33 </body>
34 </html>