$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>