jQuery插件——ajax

Posted 2020-10-07

一、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请求完成(不管成功失败，都会死乞白赖出来)");
})