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的规范，则可能会导致bootstrap 在显示glyphicon图标时无法正常显示，显示为方框。该怎么解决呢？下面小编给大家解答下2016-09-09
此作品是一款jquery+html5实现的时钟插件clock，效果非常棒，推荐给大家参考下，小伙伴们可以直接拿走使用。2015-04-04
这篇文章主要为大家详细介绍了jquery实现左右轮播图效果，经常用于购物网站的首页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
在深入了解jQuery的各个细节之前，需要对jQuery的设计思想有一个大致的了解。在遇到问题时， 知道应该使用jQuery的哪一个功能，然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想。下面跟着小编一起来看下吧2017-03-03
对直接的DOM操作进行限制2009-05-05
利用jQuery弹出select选择的值,当单击按钮的时候就会执行的一个方法，它的作用就是alert select值2013-04-04
这篇文章主要介绍了jQuery中click事件用法,以实例形式分析了click事件的具体功能及应用技巧,非常具有实用价值,需要的朋友可以参考下2014-12-12
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行2011-10-10
最新评论