Jquery工作常用實(shí)例 使用AJAX使網(wǎng)頁進(jìn)行異步更新
更新時(shí)間:2011年07月26日 19:13:24 作者:
AJAX 通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式,允許網(wǎng)頁進(jìn)行異步更新。這意味著有可能在不重載整個(gè)頁面的情況下,對網(wǎng)頁的一部分進(jìn)行更新。
AJAX = Asynchronous JavaScript and XML.,是一種創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
AJAX 通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式,允許網(wǎng)頁進(jìn)行異步更新。這意味著有可能在不重載整個(gè)頁面的情況下,對網(wǎng)頁的一部分進(jìn)行更新。
通過 jQuery AJAX,你可以直接把遠(yuǎn)程數(shù)據(jù)載入網(wǎng)頁被選HTML元素中。
Jquery Ajax常用的函數(shù)有三種,分別是:
$.post(url,data,callback,type):使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù);
$.get(url,data,callback,type):使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù);
$.ajax(options):把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對象中;
如果需要對以上三種ajax函數(shù)做深入了解的,可以參考我的博文“jQuery AJAX 函數(shù)詳解與實(shí)例應(yīng)用”。
實(shí)例:
ajax_load.html文件內(nèi)容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax_load.html</title>
</head>
<body>
<h2 style="color:#FF0000">我是李云,Jquery很好用!</h2>
</body>
</html>
index.html文件內(nèi)容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用Ajax post、get或Ajax方法來改變HTML內(nèi)容</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
//post方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
/*
$.post("ajax_load.html",function(data){
//alert(data);
$("#changeCon").html(data);
});
*/
//get方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
/*
$.get("ajax_load.html",function(data){
$("#changeCon").html(data);
});
*/
//ajax方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
$.ajax({
url:"ajax_load.html",
async:false,
success:function(data)
{
$("#changeCon").html(data);
}
})
});
})
</script>
</head>
<body>
<div id="changeCon"><h2>通過Ajax load改變此處內(nèi)容</h2></div>
<input type="button" id="button" value="Click me" />
</body>
</html>
如上,以上三種方法都能達(dá)到同樣的效果,此實(shí)例比較簡單,對剛?cè)腴T學(xué)Jquery ajax函數(shù)的朋友還是有一定的幫助的,更多的還要自己多動手去嘗試。
AJAX 通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式,允許網(wǎng)頁進(jìn)行異步更新。這意味著有可能在不重載整個(gè)頁面的情況下,對網(wǎng)頁的一部分進(jìn)行更新。
通過 jQuery AJAX,你可以直接把遠(yuǎn)程數(shù)據(jù)載入網(wǎng)頁被選HTML元素中。
Jquery Ajax常用的函數(shù)有三種,分別是:
$.post(url,data,callback,type):使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù);
$.get(url,data,callback,type):使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù);
$.ajax(options):把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對象中;
如果需要對以上三種ajax函數(shù)做深入了解的,可以參考我的博文“jQuery AJAX 函數(shù)詳解與實(shí)例應(yīng)用”。
實(shí)例:
ajax_load.html文件內(nèi)容:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax_load.html</title>
</head>
<body>
<h2 style="color:#FF0000">我是李云,Jquery很好用!</h2>
</body>
</html>
index.html文件內(nèi)容:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用Ajax post、get或Ajax方法來改變HTML內(nèi)容</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
//post方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
/*
$.post("ajax_load.html",function(data){
//alert(data);
$("#changeCon").html(data);
});
*/
//get方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
/*
$.get("ajax_load.html",function(data){
$("#changeCon").html(data);
});
*/
//ajax方法異步獲得ajax_load.html文件內(nèi)容并顯示于當(dāng)前頁:
$.ajax({
url:"ajax_load.html",
async:false,
success:function(data)
{
$("#changeCon").html(data);
}
})
});
})
</script>
</head>
<body>
<div id="changeCon"><h2>通過Ajax load改變此處內(nèi)容</h2></div>
<input type="button" id="button" value="Click me" />
</body>
</html>
如上,以上三種方法都能達(dá)到同樣的效果,此實(shí)例比較簡單,對剛?cè)腴T學(xué)Jquery ajax函數(shù)的朋友還是有一定的幫助的,更多的還要自己多動手去嘗試。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫的方法
- Jquery easyUI 更新行示例
- jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- 基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果,即時(shí)更新數(shù)據(jù)庫
- 巧妙使用JQuery Clone 添加多行數(shù)據(jù),并更新到數(shù)據(jù)庫的實(shí)現(xiàn)代碼
- jQuery學(xué)習(xí)總結(jié)之元素的相對定位和選擇器(持續(xù)更新)
- ajax更新數(shù)據(jù)后,jquery、jq失效問題
- jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法
相關(guān)文章
jQuery 源碼分析筆記(5) jQuery.support
接下來是非常糾結(jié)的一個(gè)話題,也是所有JS庫必須實(shí)現(xiàn)的一個(gè)功能:瀏覽器兼容性和為開發(fā)者屏蔽這些差異。2011-06-06基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示
近期有項(xiàng)目需求是這樣的,需要根據(jù)用戶選擇的選項(xiàng)給出相應(yīng)的提示,本文給大家介紹基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示,對jquery復(fù)選框是否選中相關(guān)知識感興趣的朋友一起看看吧2015-12-12jquery animate動畫持續(xù)運(yùn)動的實(shí)例
下面小編就為大家分享一篇jquery animate動畫持續(xù)運(yùn)動的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值,如何獲取到呢?一直困惑著我們,不過本文將為大家解開疑惑,感興趣的朋友可以了解下,或許本文對你有所幫助2013-02-02Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
本篇文章主要介紹了Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改,版權(quán)信息僅保留致謝信息,刪除作者為了代碼整體提示美觀度,故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本2011-07-07