基于asp.net下使用jquery实现ajax的解决方法

无论是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，让它显示的时候超过浏览器高度出现滚动条，如果数据变化时滚动条没有回到最上面说明是局部刷新。

至于更高级的功能，需要读者自己去查资料研究，这只是篇简单的入门文章。

赞 (0)

相关推荐

  • asp.net+ajax的Post请求实例

    本文实例讲述了asp.net+ajax的Post请求的实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: //一个ajax的Post请求       function submitInfo() {          $(".warn").hide(); //刚提交的时候隐藏错误的信息          var data = $("#formData").serialize(); //将表单的数据通过序列化表单值,创建 URL 编码文本字符串.形成一个表

  • asp.net中mvc使用ajax提交参数的匹配问题解决探讨

    想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服务端想办法来解决的(比如将json转换为字符串,再在服务端反序列化为一个对象),为何不能在客户端就把这个问题搞定. 其实问题没那么复杂,那是因为在jquery提交Array的数据时,提交的时候始终会在名称后面加上"[]", 问题就出在这里.另外在服务端对数组和内嵌的js对象进行解析时,需要

  • asp.net利用Ajax和Jquery在前台向后台传参数并返回值的实例

    1>前台 首先需要 Jquer的包 复制代码 代码如下: <script src="js/jquery-1.9.1.js" type="text/javascript"></script> 下面是     <script type="text/javascript"> $(function () { $('#txtUserName').blur(function () { var username = $

  • ASP.NET MVC中的AJAX应用

    ASP.NET MVC中的AJAX应用

    一.ASP.NET MVC中的AJAX应用 首先,在ASP.NET MVC中使用自带的ajax功能,必须要导入2个js文件(顺序不能颠倒): ASP.NET MVC提供了2个常用的ajax辅助方法. Ajax.ActionLink 该辅助方法用于在页面上生成具有ajax功能的超链接. 在该辅助方法中有一个AjaxOptions类型的参数,它包括如下属性: Confirm:在发送ajax请求前,弹出确认对话框,该属性就是设置对话框中的提示消息HttpMethod:用于设置请求的类型:Get|Pos

  • ASP.NET中使用Ajax的方法

    ASP.NET中使用Ajax的方法

    $.ajax向普通页面发送get请求这是最简单的一种方式了,先简单了解jQuery ajax的语法,最常用的调用方式是这样:$.ajax({settings}); 有几个常用的setting,全部参数及其解释可以去jQuery官方API文档查询 1. type:请求方式 get/post2. url:请求的Uri3. async:请求是否为异步4. headers:自定义的header参数5. data:发往服务器的参数6. dataType:参数格式,常见的有string.json.xml等7

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享

    由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/      //上传      function _sc() {          $(".ckfile").html("").css("color", "#535353");          $("#_userImgPath").val("");     

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • asp.net 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

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • ASP.NET与Ajax的实现方式小总结

    Ajax 已经很流行一阵子了,现在谈 Ajax 觉得有点老土,-_____-```.目前所谓的 Web2.0 网站,基本上没有不使用 Ajax 的,就如使用 RSS 一样,就如同一个标签,贴上去就成了 2.0.Ajax 具体细节不谈,其目的就是让用户触发一些操作的时候,页面不会全部刷新,只刷新待更新的"部分页面",加载数据的过程中,用 Loading 的图片来表示正在加载数据,不只是看起来挺不错,也提高了用户的访问体验,有一种酷酷的感觉. 至于 ASP.NET 中用到的 Ajax ,我

随机推荐