jquery $.ajax入門應(yīng)用二
更新時間：2008年11月19日 16:09:22 作者：
jquery $.ajax的應(yīng)用實(shí)例
前臺
<!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>
<title>無標(biāo)題頁</title>
<style type="text/css">
.show{ display:block;}
.hide{ display:none;}
</style>
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
//這個方法把a(bǔ)jax方法封裝一下，方便調(diào)用。
function myajax(){
$.ajax({
type:'get',
url:'ajax.aspx',
data:'id=1name=tree',
dataType:'html',
beforeSend:beforecall,
success:callback
});
}
//調(diào)用前方法
function beforecall(){
$('#wait').addClass("show").append('調(diào)出中...');
//alert('');//測試是否調(diào)用
}
//回調(diào)函數(shù)
function callback(data){
$('#response').append(data);
$('#wait').css("display","none");
}
//onload()事件
$(function(){
$('#confirm').click(myajax);
})
</script>
</head>
<body>
<div id="confirm">點(diǎn)擊</div>
<div id="response">接收后臺數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("hello"+Request["name"]);
Response.End();
}
復(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>
<title>無標(biāo)題頁</title>
<style type="text/css">
.show{ display:block;}
.hide{ display:none;}
</style>
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
//這個方法把a(bǔ)jax方法封裝一下，方便調(diào)用。
function myajax(){
$.ajax({
type:'get',
url:'ajax.aspx',
data:'id=1name=tree',
dataType:'html',
beforeSend:beforecall,
success:callback
});
}
//調(diào)用前方法
function beforecall(){
$('#wait').addClass("show").append('調(diào)出中...');
//alert('');//測試是否調(diào)用
}
//回調(diào)函數(shù)
function callback(data){
$('#response').append(data);
$('#wait').css("display","none");
}
//onload()事件
$(function(){
$('#confirm').click(myajax);
})
</script>
</head>
<body>
<div id="confirm">點(diǎn)擊</div>
<div id="response">接收后臺數(shù)據(jù)</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
后臺
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("hello"+Request["name"]);
Response.End();
}
相關(guān)文章
jQuery ajax提交Form表單實(shí)例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實(shí)例分析了jQuery ajax操作實(shí)現(xiàn)表單提交的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
用jQuery實(shí)現(xiàn)的模仿a的title屬性的例子，在測試的時候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01
BootStrap glyphicon圖標(biāo)無法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范，則可能會導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時無法正常顯示，顯示為方框。該怎么解決呢？下面小編給大家解答下2016-09-09
此作品是一款jquery+html5實(shí)現(xiàn)的時鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)左右輪播圖效果，經(jīng)常用于購物網(wǎng)站的首頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
在深入了解jQuery的各個細(xì)節(jié)之前，需要對jQuery的設(shè)計(jì)思想有一個大致的了解。在遇到問題時， 知道應(yīng)該使用jQuery的哪一個功能，然后迅速從手冊中找到具體的用法。本文將詳細(xì)介紹jQuery的設(shè)計(jì)思想。下面跟著小編一起來看下吧2017-03-03
對直接的DOM操作進(jìn)行限制2009-05-05
利用jQuery彈出select選擇的值,當(dāng)單擊按鈕的時候就會執(zhí)行的一個方法，它的作用就是alert select值2013-04-04
這篇文章主要介紹了jQuery中click事件用法,以實(shí)例形式分析了click事件的具體功能及應(yīng)用技巧,非常具有實(shí)用價值,需要的朋友可以參考下2014-12-12
默認(rèn)設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行2011-10-10