溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JQuery中的Ajax怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
JQuery對Ajax操作進行了封裝，在JQuery的最底層的方法是$.ajax(),第二層是load() $.get() $.post(), 第三層是$.getScript()和$.getJSON().
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$("#content").load(url, args);
return false;
});
});
</script>
</head>
<body>
<a href="helloAjax.txt">hello</a>
<div id="content"></div>
</body>
</html>load()方法是JQuery中最為簡單和常用的Ajax方法，能載入遠程的HTML代碼并插入到DOM中。它的結構是 load（url[,data][,callback]）
url （String）請求HTML頁面的URL地址
data（可選）(Object)發送到服務器的key/value數據
callback（可選） (Function)請求完成時的回調函數，無論請求成功或失敗
可以使用url selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//var url = this.href;//默認全選擇
//var url = this.href + " h3";//選擇h3部分
var url = this.href + " h3 a";//選擇h3中的a部分
var args = {"time":new Date()};
$("#details").load(url, args);
return false;
});
})
</script>
</head>
<body>
<ul>
<li><a href="a.html">百度</a></li>
</ul>
<div id="details"></div>
</body>
</html>a.html
<a href="http://www.baidu.com">http://www.baidu.com</a> <h3> H2 Test <a href="http://www..com">QQ</a> </h3>
$.get()(或$.post())方法
$.get()方法使用GET方式來進行異步請求，結構是$.get(url[,data][,callback][,type])
url （String）請求HTML頁面的URL地址
data（可選）(Object)發送到服務器的key/value數據,數據位作為QueryString附加到請求的url中
callback（可選） (Function)載入成功時的回調函數（只有當reponse的返回狀態是success時才調用該方法）自動將請求結果和狀態傳遞給該方法
type(可選)(String)服務器返回內容的格式，包括xml、html、script、json、text、default
textstatus代表請求狀態，包括success error notmodify timeout
$.get() $.post() 是JQuery中的全局函數
find() 等方法都是對JQuery對象進行操作的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
//args :JSON格式
//function 回調函數，當相應結束時被觸發。響應結果在data中
$.post(url, args, function(data){
//$.get(url, args, function(data){//這里使用post和get無區別
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
$("#details").empty().append("<h3><a href='mailto:"+email+"'>"+name+"</a></h3>")
.append("<a href='"+website+"'>"+website+"</a>");
});
return false;
});
})
</script>
</head>
<body>
<ul>
<li><a href="andy.xml">andy</a></li>
</ul>
<div id="details"></div>
</body>
</html>andy.xml
<?xml version="1.0" encoding="UTF-8"?> <details> <name>Andy Budd</name> <website>http://www.baidu.com</website> <email>umgsai@126.com</email> </details>
下面使用json格式數據來實現上面的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
//args :JSON格式
//function 回調函數，當相應結束時被觸發。響應結果在data中
$.getJSON(url, args, function(data){
var name = $(data).person.name;
var website = $(data).person.website;
var email = $(data).person.email
$("#details").empty().append("<h3><a href='mailto:"+email+"'>"+name+"</a></h3>")
.append("<a href='"+website+"'>"+website+"</a>");
});
return false;
});
})
</script>
</head>
<body>
<ul>
<li><a href="andy.json">andy</a></li>
</ul>
<div id="details"></div>
</body>
</html>andy.json
{"person":{
"name":"umgsai",
"website":"http://www.baidu.com",
"email":"umgsai@126.com"
}
}小結：
什么是Ajax？ 不用刷新頁面，但可以和服務器端進行通信的方式。使用Ajax的主要方式是XMLHttpRequest對象
使用XMLHttpRequest對象實現Ajax（了解）。現在一般使用JQuery或者其他的JS框架來獲取。
Ajax傳輸數據的三種方式
①XML：笨重，解析困難。但XML是通用的數據交換格式
②HTML：不需要解析可以直接放到文檔中，若僅更新一部分區域，但傳輸的數據不是很方便，切HTML代碼需要拼裝完成。
③JSON：小巧，有面向對象的特征，并且提供很多第三方的Jar包把Java對象或集合轉成Json字符串。是目前使用最多的方式。
使用JQuery完成Ajax操作
①load方法：可以用于HTML文檔的元素結點，把結果直接加為對應結點的子元素。通常load方法加載的數據是HTML片段。
var $obj = ...
var url = ...
var agrs = {key:value,...};
$obj.load(url, args);
② $.get $.post $.getJSON 更加靈活。除去使用load方法的情況，大部分使用這三個方法。
//url:Ajax請求的目標URL
//args：傳遞的參數 JSON類型
//data: Ajax響應成功后的數據，可能是XML HTML JSON
$.get(url, args, function(data){
});
請求JSON數據
$.get(url, args, function(data){
}, "JSON");
$.post(url, args, function(data){
}, "JSON")
$.getJSON(url, args, function(data){
})
以上是“JQuery中的Ajax怎么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
