一、ajax请求
1、load(url, [data], [callback])
概述:加载远程的HTML文件代码,并插入到指定的DOM节点中。
参数:url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
可以只传入一个参数,表示加载一个静态的HTML代码片段。
$("#div1").load("load.html");
2、$.ajax():是JQuery最底层的ajax函数,参数接收一个大对象。对象里面的属性和方法,表示ajax请求的相关设置:
(1)url : 请求远程文件的路径
(2)type: Ajax请求的类型,可选值 get/post
(3)data: 对象格式。向后台发送一个对象,表示传递的数据。
常用与type为"post"的请求方式;如果type为"get",可以直接使用?追加在URL的后面。
(4)dataType :预期后台返回什么类型的数据。
"text"-字符串 "json"-JSON对象
(5)success: 请求成功的回调函数。参数接受一个data,表示后台返回的数据。
(6)error : 请求失败的时候的回调函数
(7)statusCode : 接受一个对象,对象的键值对是status状态码和对应的回调函数,表示当请求状态码是对应数字时,执行具体的操作函数。
200-正常请求成功 404-页面没有找到 500-服务器内部错误。
$.ajax({ url : "http://localhost/json.php?name=‘zhangsan‘&age=12", type: "post", data : { name : "李四", age : 28 }, dataType : "json", success : function(data){ // JQuery中吧JSON字符串转成JSON对象 var jsons = $.parseJSON(data); console.log(jsons); }, error: function(){ alert("请求失败啦!"); }, statusCode:{ "404":function(){ alert("404表示页面没有找到"); }, "500":function(){ alert("500表示服务器内部错误"); }, "200":function(){ alert("200表示请求成功"); } } });
3、$.get(); $.post(); 这两个函数,是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求;
接受四个参数:
① 请求的URL路径。 相当于$.ajax()里面的url;
② 向后台传递的数据。 相当于$.ajax()里面的data;
③ 请求成功的回调函数。 相当于$.ajax()里面的success;
④ 预期返回的数据类型。 相当于$.ajax()里面的dataType;
$.post("http://localhost/json.php",{data:"aaa"},function(data){ console.log(data); },"json");
4、$.getJSON 以Get的方式,请求JSON对象的数据
$.getJSON("http://localhost/json.php",{data:"aaa"},function(data){ console.log(data); });
5、$.parseJSON(str) 将JSON字符串转为JSON对象
标准的JSON字符串,键必须用双引号包裹。
var str = ‘{"age":12}‘ var obj = $.parseJSON(str); console.log(obj);
6、.trim() 去除掉字符串两端空格
var str1 = " 123 "; console.log(str1.trim());
7、用户遍历数组和对象
遍历数组时,函数的第一个参数是下标,第二个参数是值;
遍历对象时,函数的第一个参数是键,第二个参数是值
var arr = [1,2,3,4,5,6,7]; var obj = { name : "zhangsan", age : 12, sex : "nan" } $.each(obj,function(index,item){ console.log(index); console.log(item); });
二、ajax事件
AJax的各种监听事件:
ajaxStart ——→ ajaxSend ——→ ajaxSuccess/ajaxError/ajaxComplete ——→ ajaxStop
$(document).ajaxSend(function(){ alert("ajax请求发送"); }); $(document).ajaxStop(function(){ alert("ajax请求停止"); }) $(document).ajaxStart(function(){ alert("ajax请求开始"); }) $(document).ajaxSuccess(function(){ alert("ajax请求成功"); }) $(document).ajaxError(function(){ alert("ajax请求失败"); }) $(document).ajaxComplete(function(){ alert("ajax请求完成(不管成功失败,都会死乞白赖出来)"); })