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