微信扫一扫打赏支持

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

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>

 

 

 

 
posted @ 2018-07-20 10:58  范仁义  阅读(1308)  评论(0)  编辑  收藏  举报