js进阶 14-6 $.ajax()方法如何使用
一、总结
一句话总结：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
1、$.ajax()的特点是什么（和$.get()、$.post()的区别是什么）？
$.get,$.post为$.ajax()的封装
2、$.ajax()方法的参数是什么形式？
键值对
- 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
- 常用参数：
- url默认值：当前页地址。发送请求的地址。
- type请求方式(“POST”或”GET”),默认为”GET”。
- Success类型：Function请求成功后的回调函数。
- error请求失败时调用此函数。
- .........
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请求的键值对集合。
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
- 常用参数：
- url默认值：当前页地址。发送请求的地址。
- type请求方式(“POST”或”GET”),默认为”GET”。
- Success类型：Function请求成功后的回调函数。
- error请求失败时调用此函数。
- .........
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>