$ajax

$ajax

1. 已封装好的ajax:

2. 常用参数:

  • cache :设置ie浏览器的缓存问题

cache: false 不缓存

  • url :请求地址 (必写)
  • type / method :请求方法

默认为 get。(必写)

  • dataType :预期服务端响应数据类型

'text','json'...

默认是json格式。

  • contentType :请求体内容类型

如果是POST请求,默认 application/x-www-form-urlencoded

  • data :传递到服务端的数据

object 或 string

  • timeout :请求超时时间
  • beforeSend :请求发起之前触发
  • complete :请求完成触发(不管成功与否)
  • success :请求成功之后触发

响应状态码 200

  • error :请求失败触发
  • processData :是否让jQuery帮我们将发送给服务器的数据进行处理

默认:true表示将对象处理成字符串

 1 <body>
 2     <p id="loading" style="display: none">玩命加载中...</p>
 3     <script src="lib/jquery-1.12.4.js"></script>
 4     <script>
 5         $.ajax({
 6             //请求方式,默认是get
 7             type: 'GET',
 8             //URL 请求地址
 9             url: '/big-data',
10             //发送给服务器的参数(可选,可以是字符串或者对象)
11             data: 'id=11&age=22&sex=33',
12             //处理服务器返回的数据
13             success: function(result) {
14                 //result就是服务器返回的数据
15                 console.log(result); 
16                 //返回一个object{id:11,age:22,sex:33}
17             }
18             //发送请求开始时
19             beforeSend: function() {
20                 $('#loading').show();
21             },
22             //请求结束后
23             complete: function() {
24                 $('#loading').hide();
25             }
26             //把data对象转成字符串
27             processData: false
28         })
29     </script>
30 </body>

3.GET和POST快捷方法

$.get(url, [data], [callback], [dataType])

$.post(url, [data], [callback], [dataType])

属性url必须写,其他可选。

1         $.get('/time', function(result) {
2             console.log(result);
3         }); 

4.全局事件

语法:$.ajaxSetup({事件: 处理函数, 事件:处理函数, ...});

 1 <body>
 2     <input type="button" value="请求">
 3     <p id="loading" style="display: none">玩命加载中...</p>
 4     <script src="lib/jquery-1.12.4.js"></script>
 5     <script>
 6         //注册全局事件,后续每次Ajax请求都会自动触发全局事件
 7         $.ajaxSetup({
 8             beforeSend: function () {
 9                 $('#loading').show();
10             },
11             complete: function () {
12                 $('#loading').hide();
13             }
14         });
15         //如果有很多ajax请求,每一个请求都需要一个提示
16         $.ajax({
17             url: '/big-data',
18             success: function (result) {
19                 console.log(result.length);
20             }
21         })
22         //点击按钮的时候再次发生ajax请求
23         $('input').click(function () {
24             $.ajax({
25                 url: '/big-data',
26                 success: function (result) {
27                     console.log(result.length);
28                 }
29             })
30         })
31     </script>
32 </body>

 

进度提示插件:https://github.com/rstacruz/nprogress