基于asp.net下使用jquery实现ajax的解决方法
程序员文章站
2024-03-01 18:02:10
无论是jquery还是ajax在今天来讨论已经很落后了,网上也有非常多的这方面的资料,但是依然有不少新手对此很茫然。本文以最简单的方法为新手示范如何使用jquery实现aj...
无论是jquery还是ajax在今天来讨论已经很落后了,网上也有非常多的这方面的资料,但是依然有不少新手对此很茫然。本文以最简单的方法为新手示范如何使用jquery实现ajax技术(所以本文是专为新手所写,老鸟勿喷,大神此处省略一万字)。至于什么是jquery什么是ajax,自己谷歌去。
首先新建一个名闻ajax的asp.net web空应用程序,项目目录如下图所示。
其中.ashx文件是一般处理程序,暂时不用知道它是干嘛用的,后面你就知道了。jquery-1.7.1.js可以在。
我们首先理清一下我们要实现的功能:webform1页面每隔一秒向handler1处理程序发出请求,handler1返还数据给webform1页面,webform1页面通过ajax技术实现局部刷新效果。
首先来看看handler1的主要代码:
复制代码 代码如下:
public void processrequest(httpcontext context)
{
random rand = new random();
int num = rand.next(1,10);
context.response.write(num);
}
主要是把processrequest这个方法改成以上的样子,产生一个1~9的随机整数返回给请求页面。
再来看看webform1.aspx的主要代码:
复制代码 代码如下:
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function get() {
$.ajax({
type: "post",
url: "handler1.ashx",
data: "",
success: function (data) {
$("#datashow").text(data);
}
});
}
setinterval(get, 1000);
})
</script>
我们要使用jquery的话,就要引用我们刚下下载的那个jqury-1.7.1.js文件,下面的代码应该能看明白吧?如果这也看不明白,那要先去补补js的基础了。
在页面上添加这样一句代码:
复制代码 代码如下:
<p id="datashow"></p>
是用来显示请求handler1返回的数据的。
完了!就这么多!如果正常的话,你可以在浏览器上看到一个从1到9不断随机变换的数字,注意,这里并不是整个页面刷新的!如果不信,你可以给<p>标签一个margin,让它显示的时候超过浏览器高度出现滚动条,如果数据变化时滚动条没有回到最上面说明是局部刷新。
至于更高级的功能,需要读者自己去查资料研究,这只是篇简单的入门文章。
推荐阅读
-
基于asp.net下使用jquery实现ajax的解决方法
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
-
ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
-
基于ubuntu中使用mysql实现opensips用户认证的解决方法
-
prototype与jquery下Ajax实现的差别_javascript技巧
-
基于ubuntu中使用mysql实现opensips用户认证的解决方法
-
prototype与jquery下Ajax实现的差别_javascript技巧
-
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
-
使用PHP+JQuery+Ajax分页的实现_jquery