基于asp.net下使用jquery实现ajax的解决方法
2013-05-02 00:00
1126 查看
无论是jquery还是ajax在今天来讨论已经很落后了,网上也有非常多的这方面的资料,但是依然有不少新手对此很茫然。本文以最简单的方法为新手示范如何使用jquery实现ajax技术(所以本文是专为新手所写,老鸟勿喷,大神此处省略一万字)。至于什么是jquery什么是ajax,自己谷歌去。
首先新建一个名闻Ajax的asp.net web空应用程序,项目目录如下图所示。
其中.ashx文件是一般处理程序,暂时不用知道它是干嘛用的,后面你就知道了。jquery-1.7.1.js可以在这里下载。
我们首先理清一下我们要实现的功能:WebForm1页面每隔一秒向Handler1处理程序发出请求,Handler1返还数据给WebForm1页面,WebForm1页面通过ajax技术实现局部刷新效果。
首先来看看Handler1的主要代码:
主要是把ProcessRequest这个方法改成以上的样子,产生一个1~9的随机整数返回给请求页面。
再来看看WebForm1.aspx的主要代码:
我们要使用jquery的话,就要引用我们刚下下载的那个jqury-1.7.1.js文件,下面的代码应该能看明白吧?如果这也看不明白,那要先去补补js的基础了。
在页面上添加这样一句代码:
是用来显示请求Handler1返回的数据的。
完了!就这么多!如果正常的话,你可以在浏览器上看到一个从1到9不断随机变换的数字,注意,这里并不是整个页面刷新的!如果不信,你可以给<p>标签一个margin,让它显示的时候超过浏览器高度出现滚动条,如果数据变化时滚动条没有回到最上面说明是局部刷新。
至于更高级的功能,需要读者自己去查资料研究,这只是篇简单的入门文章。
首先新建一个名闻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中使用IHttpHandler处理请求(如自实现AJAX)时,无法获得Session(或者说是Session 为 null)的原因及解决方法
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- 在Asp.net中使用jquery实现Ajax
- 在Asp.net中使用jquery实现Ajax
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【五】——在Web Api中实现Http方法(Put,Post,Delete)
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- asp.net 使用jquery 和ajax 实现三级联动
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- 在Asp.net中使用jquery实现Ajax (转)
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- 在Asp.net中使用jquery实现Ajax
- ASP.NET MVC使用Ajax的辅助的解决方法
- asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
- Asp.Net分页方法:JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页
- 在Asp.net中使用jquery实现Ajax (转)
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
- asp.net下使用jquery实现ajax