组团学
学习方向
登录/注册

JQuery与AJAX

阅读 (372)

一、load()方法

原型：load(url[, data][, callback])

功能：load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中

说明：该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 “success” 或 “notmodified” 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单

参数 说明
url 请求HTML页面的URL地址
data 可选参数。发送至服务器的key:value数据
callback(response,status,xhr) 可选参数。请求完成时的回调函数，无论请求是否成功
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象

  • 载入HTML文档

    准备界面sunck.html

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div>
        	<p class="cl1">good</p>
        	<p class="cl1">nice</p>
        	<p class="cl2">handsome</p>
        </div>
	</body>
</html>

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="http://192.168.1.32:8090/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <button id="button">请求数据</button>
        
        <script type="text/javascript">
            $(function(){
                $("#button").bind("click", function(){
                   //$("#box").load("http://192.168.1.32:8090/test.txt");
                   //$("#box").load("http://192.168.1.32:8090/sunck.html");
                });
            });
        </script>
	</body>
</html>

  • 载入HTML文档中的指定元素

    $("#box").load("http://192.168.1.32:8090/sunck.html .cl1");

  • 传递方式(get、post)和回调参数

    load()方法的传递方式是根据传递的参数data来指定的。如果没有传递参数，默认采用GET方式传递，否则将自动转换为POST方式

    $("#box").load("http://192.168.1.32:8090/sunck.html",{x:"1", y:"2"},function(response,status,xhr){
    console.log(response);
    console.log("-------------------")
    console.log(status);
    console.log("-------------------")
    console.log(xhr);
});

二、get()方法与post()方法

  • get()方法

    原型：$.get(url[, data][, callback][, type])

    功能：使用GET方式进行异步请求

    注意：与load()方法不同，回调函数只有当数据成功返回时才能被调用

    参数 说明
    url 请求URL地址
    data 可选参数。发送到服务器的数据
    callback(data, status) 可选参数。规定当请求成功时运行的函数
    type 可选参数。预计的服务器响应的数据类型
    默认地，jQuery将智能判断

  • post()方法

    原型：$.post(url[, data][, callBack][, type])

    功能：使用POST方式进行异步请求

    注意：与load()方法不同，回调函数只有当数据成功返回时才能被调用

    参数 说明
    url 请求URL地址
    data 可选参数。发送到服务器的数据
    callback(data, status) 可选参数。规定当请求成功时运行的函数
    type 可选参数。预计的服务器响应的数据类型
    默认地，jQuery将智能判断    		 
<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form name="form" action="">
        	<input type="text" id="username" placeholder="用户名" /><br/>
        	<input type="password" id="passwd" placeholder="密码" /><br/>
        	<input type="button" id="button" value="提交"/>
        </form>
        
        <script type="text/javascript">
            $(function(){
                $("#button").bind("click", function(){
                    var data = {
                        username: $("#username").val(),
                        passwd: $("#passwd").val()
                    }
                    $.get("test.txt", data, function(data, status){
                        console.log(data);
                        console.log(status);
                    })
                });
            });
        </script>
	</body>
</html>

三、getScript()方法

原型：getScript(url[, callback])

功能：通过全局函数$.getScript()加载JS文件后，不仅可以像加载HTML片段一样简单方便，而且JavaScript文件会自动执行，大大提高了页面的执行效率

参数 说明
url 请求URL地址
callback(response,status,xhr) 可选参数。请求完成时的回调函数，无论请求是否成功
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象		 
alert("sunck is a good man");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <button type="button" id="btn">加载js文件</button>
        
        <script type="text/javascript">
            $(function(){
                $("#btn").bind("click", function(){
                    $.getScript("sunck.js", function(response, status, xhr){
                        console.log("加载完毕");
                        console.log(response);
                        console.log(status);
                        console.log(xhr);
                    });
                });
            });
        </script>
	</body>
</html>

四、getJSON()方法

原型：getJSON(url[, callback])

功能：加载JSON文件

参数 说明
url 请求URL地址
callback(response,status,xhr) 可选参数。请求完成时的回调函数，无论请求是否成功
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象		 
[
	{
		"name":"轻鸿",
		"sex":"女",
		"email":"mingrisoft@mingrisoft.com"
	},
	{
		"name":"无语",
		"sex":"女",
		"email":"mxxx@163.com"
	}
]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <button type="button" id="btn">加载json文件</button>
        <div id="json"></div>
        <script type="text/javascript">
            $(function(){
                $("#btn").bind("click", function(){
                    $.getJSON("test.json", function(response, status, xhr){
                        var htmlStr = "";
                        $.each(response, function(index, info){
                        	  htmlStr+="姓名："+info['name']+"<br/>";
                            htmlStr+="性别："+info['sex']+"<br/>";
                        	  htmlStr+="邮箱："+info['email']+"<br/><br/>";
                        });
                        $("#json").html(htmlStr);
                        console.log(response);
                        console.log(status);
                        console.log(xhr);
                    });
                });
            });
        </script>
	</body>
</html>

五、ajax()方法

原型：ajax([options])

说明：除了可以使用全局性函数load()、.get()、.post()实现页面的异步调用和与服务器交互数据外，在jQuery中还有一个功能更为强大的最底层的方法$.ajax()，该方法不仅可以方便地实现上述三个全局函数完成的功能，而且可以更多地关注实现过程中的细节

注意：参数options为ajax()方法中的请求设置，格式为key:value，既包含发送请求的参数，也含有服务器响应后回调的数据

参数名称 类型 说明
url String 发送请求的地址
type String 数据请求方式(post或get)，默认为get
data string或Object 发送到服务器的数据
如果不是字符串则自动转成字符串格式，如果是GET请求方式，那么该字符串将附在URL之后
dataType String 服务器返回的数据类型
如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断结果进行解析，传递给回调函数
可用类型如下：
html：返回纯文本的HTML信息，包含的script标记会在插入页面时被执行
script：返回纯文本的JavaScript代码
text：返回纯文本的字符串
xml：返回可被jQuery处理的XML文档
json：返回JSON格式的数据
beforeSend Function 该函数用于发送请求前修改XMLHttpRequest对象，其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此如果函数返回false，则表示取消本次事件
function (XMLHttpRequest){
this；//调用本次ajax请求时传递的options参数
}
complete Function 请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，有两个参数，一个是XMLHttpRequest对象，另一个是textStatus，用来描述状态的字符串
function (XMLHttpRequest, testStatus){
this；//调用本次ajax请求时传递的options参数
}
success Function 请求成功后调用的回调函数，该函数有两个参数，一个是根据dataType处理后服务器返回的数据，另一个是textStatus，用来描述状态的字符串
function (data, testStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this；//调用本次ajax请求时传递的options参数
}
error Function 请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个参数是捕获到的错误对象strObject
function (XMLHttpRequest, strError, strObject){
//通常请情况下strError和strObject只有一个包含信息
this；//调用本次ajax请求时传递的options参数
}
global Boolean 是否响应全局事件，默认是true，表示响应。如果设置为false，表示不响应。全局事件$.ajaxStart等不响应
timeout Number 请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup()方法的全局设置 
[
	{
		"name":"轻鸿",
		"sex":"女",
		"email":"mingrisoft@mingrisoft.com"
	},
	{
		"name":"无语",
		"sex":"女",
		"email":"mxxx@163.com"
	}
]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form name="form" action="">
            <input type="text" id="username" placeholder="用户名" /><br/>
            <input type="password" id="passwd" placeholder="密码" /><br/>
            <input type="button" id="button" value="请求数据"/>
        </form>
        <div id="json"></div>
        
        <script type="text/javascript">
            $(function(){
                $("#button").bind("click", function(){
                    var data = {
                        username: $("#username").val(),
                        passwd: $("#passwd").val()
                    }
                    $.ajax({
                        url: "test.json",
                        type: "get",
                        data: data,
                        dataType: "json",
                        success: function(data, textStatus){
                            var htmlStr = "";
                            $.each(data, function(index, info){
                                htmlStr+="姓名："+info['name']+"<br/>";
                                htmlStr+="性别："+info['sex']+"<br/>";
                                htmlStr+="邮箱："+info['email']+"<br/><br/>";
                            });
                            $("#json").html(htmlStr);
                        }
                    })
                });
            });
        </script>
	</body>
</html>

六、serialize()方法

当表单所需要收集的数据较多时，在传递之前需要放入一个对象中，如此操作比较麻烦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form id="testForm" action="">
            用户名：<input type="text"  name="username" id="username"/><br/>
            性别：<input type="text"  name="sex" id="sex"/><br/>
            年龄：<input type="text"  name="age" id="age"/><br/>
            邮箱：<input type="text"  name="email" id="email"/><br/>
            地址：<input type="text"  name="address" id="address"/><br/>
            内容：<textarea id="content" name="content" id="content"></textarea><br/>
            <input type="button" id="button" value="请求数据"/>
        </form>
        <div id="json"></div>
        
        <script type="text/javascript">
            $(function(){
                $("#button").bind("click", function(){
                    var data = {
                        username: $("#username").val(),
                        sex: $("#sex").val(),
                        age: $("#age").val(),
                        sex: $("#sex").val(),
                        email: $("#email").val(),
                        address: $("#address").val(),
                        content: $("#content").val()
                    }
                    $.ajax({
                        url: "test.json",
                        type: "get",
                        data: data,
                        dataType: "json",
                        success: function(data, textStatus){
                            var htmlStr = "";
                            $.each(data, function(index, info){
                                htmlStr+="姓名："+info['name']+"<br/>";
                                htmlStr+="性别："+info['sex']+"<br/>";
                                htmlStr+="邮箱："+info['email']+"<br/><br/>";
                            });
                            $("#json").html(htmlStr);
                        }
                    })
                });
            });
        </script>
	</body>
</html>

使用格式：form表单jQuery包装集对象.serialize()

作用：序列化收集表单内容

注意：表单中的input的name将作为属性名，value将作为属性值

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form id="testForm" action="">
            用户名：<input type="text"  name="username" id="username"/><br/>
            性别：<input type="text"  name="sex" id="sex"/><br/>
            年龄：<input type="text"  name="age" id="age"/><br/>
            邮箱：<input type="text"  name="email" id="email"/><br/>
            地址：<input type="text"  name="address" id="address"/><br/>
            内容：<textarea id="content" name="content" id="content"></textarea><br/>
            <input type="button" id="button" value="请求数据"/>
        </form>
        <div id="json"></div>
        
        <script type="text/javascript">
            $(function(){
                $("#button").bind("click", function(){
                    var data = $("#testForm").serialize();
                    console.log(data);
                    $.ajax({
                        url: "test.json",
                        type: "get",
                        data: data,
                        dataType: "json",
                        success: function(data, textStatus){
                            var htmlStr = "";
                            $.each(data, function(index, info){
                                htmlStr+="姓名："+info['name']+"<br/>";
                                htmlStr+="性别："+info['sex']+"<br/>";
                                htmlStr+="邮箱："+info['email']+"<br/><br/>";
                            });
                            $("#json").html(htmlStr);
                        }
                    })
                });
            });
        </script>
	</body>
</html>

七 、全局事件

概述：当发送ajax请求时会触发ajax全局事件

事件 参数 说明
ajaxStart(callback) 回调函数 Ajax请求开始时触发该事件
ajaxSend(callback) 回调函数 Ajax请求发送前触发该事件
ajaxSuccess(callback) 回调函数 Ajax请求成功时触发该事件
ajaxError(callback) 回调函数 Ajax请求出现错误时触发该事件，其中捕获到的错误可以作为最后一个参数进行传递
ajaxComplete(callback) 回调函数 Ajax请求完成时触发该事件
ajaxStop(callback) 回调函数 Ajax请求结束时触发该事件

注意：在jQuery中，所有的全局事件都是以XMLHttpRequest对象和设置作为参数传递给回调函数，在处理回调函数时，只要分析其传回的参数值即可

使用场景：在jQuery当中使用Ajax获取异步数据时，会经常使用到ajaxStart和ajaxStop这两个全局事件。当请求开始时，会触发ajaxStart()方法的回调函数，往往用于编写一些准备性工作，例如提示“数据正在获取中……”；当请求结束时会触发ajaxStop()方法的回调函数，这一事件往往与前者相配合，说明请求的最后进展状态，例如网站中获取图片的速度较慢，在图片加载过程中可以给用户提供一些友好的提示和反馈信息，常用的提示信息为“图片加载中……”，待图片加载完毕后隐藏该提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            #loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; display: none;}
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="loading">Loading.....</div>
        <button type="button" id="button">请求数据</button>
        <div id="json"></div>
        
        <script type="text/javascript">
            $(function(){
                $(document).ajaxStart(function(){
                    $("#loading").show();
                });
                
                $(document).ajaxStop(function(){
                    $("#loading").slideUp(1000);
                });
                
                $("#button").bind("click", function(){
                    $.ajax({
                        url: "test.json",
                        type: "get",
                        success: function(data, textStatus){
                            var htmlStr = "";
                            $.each(data, function(index, info){
                                htmlStr+="姓名："+info['name']+"<br/>";
                                htmlStr+="性别："+info['sex']+"<br/>";
                                htmlStr+="邮箱："+info['email']+"<br/><br/>";
                            });
                            $("#json").html(htmlStr);
                        }
                    });
                });
            });
        </script>
	</body>
</html>
需要 登录 才可以提问哦
头像
：
回复