jQuery高级Ajax

Posted 2020-10-07 Mr.TongYu、

.load();
加载远程的html文件代码，并插入到指定的DOM节点中。
可以只传入一个参数，表示加载一个静态的HTML代码片段。

$("#div1").load("load.html");

 

$.ajax():是JQuery最底层的ajax函数，参数接收一个大对象。对象里面的属性和方法，表示ajax请求的相关设置：
① url : 请求远程文件的路径

② type： Ajax请求的类型，可选值 get/post

③ data: 对象格式。向后台发送一个对象，表示传递的数据。
　　常用与type为"post"的请求方式；
　　如果type为"get"，可以直接使用？追加在URL的后面。

④ dataType ：预期后台返回什么类型的数据。
 "text"-字符串 "json"-JSON对象

⑤ success: 请求成功的回调函数。参数接受一个data，表示后台返回的数据。

⑥ error : 请求失败的时候的回调函数

⑦ 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表示请求成功");
                }
            }
        });

 

$.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");

$.getJSON 以Get的方式，请求JSON对象的数据。

$.getJSON("http://localhost/json.php",{data:"aaa"},function(data){
            console.log(data);
});

 

表单序列化

$(function(){
$("#btn1").click(function(){
    /* 序列化表单数据为一个字符串 */
    var str = $("#form1").serialize();
    console.log(str);
    //str = name=jiang&password=123&email=1234123
    var arr = str.split("&");
    console.log(arr);
    var obj = {};
    for (var i=0; i<arr.length; i++) {
        var arr1 = arr[i].split("=");
        var keys = arr1[0];
        var values = arr1[1];
        obj[keys] = values;
    }
    console.log(obj);
    $.get("01-JQuery基础.html?"+str,obj,function(){
        
    })
})

$("#btn2").click(function(){
    /*序列化表单数据为一个数组*/
    var arr = $("#form1").serializeArray();
    console.log(arr);
    var obj = {};
    for (var i=0; i<arr.length; i++) {
        var keys = arr[i].name;
        var values = arr[i].value;
        obj[keys] = values;
    }
    console.log(obj);
});
});

 

<form id="form1">
    用户名：<input type="text" name="name" />
    密码：<input type="text" name="password" />
    邮箱：<input type="text" name="email" />
    <input type="button" value="点击序列化表格" id="btn1" />
    <input type="button" value="点击序列化表格为数组" id="btn2" />
</form

 

$.parseJSON(str) 将JSON字符串转为JSON对象
标准的JSON字符串，键必须用双引号包裹。

var str = ‘{"age":12}‘
var obj = $.parseJSON(str);
console.log(obj);

.trim() 去除掉字符串两端空格

var str1 = " 123 ";
console.log(str1.trim());

 

用户遍历数组和对象
遍历数组时，函数的第一个参数是下标，第二个参数是值；
遍历对象时，函数的第一个参数是键，第二个参数是值。

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的各种监听事件：
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请求完成(不管成功失败，都会死乞白赖出来)")
})