在ASP.NET同样可以与其它编程语言一样，利用前台的Ajax技术，只是需要注意的是，后台的处理程序不再是一个aspx页面中的Page_Load，而且ASP.NET独有的“一般处理程序”.ashx，下面用一个简单的例子来说明这个问题。

如下图，一个简单到，完全可以用前台脚本完成的加法程序。这里只是为了说明问题。

首先，这个解决方案的文件结构如下图：

你首先要右击解决方案的方式，通过添加“现有项”的方式，将一个高版本的jQuery.js文件添加到你的解决方案，直接复制这个文件复制到解决方案的文件夹是没有用的，亲测。

之后，要添加一个“新建项”，这个新建项是一般处理程序.ashx，而不是一般的Web窗体.aspx

这里，将一般处理程序，命名为Calculate.ashx，代码如下，其展示给前台的东西是通过context.Response.Write完成的，用于将处理内容打印到前台。

这里首先用context.Request.Form从前台接受两个Post传递过来的参数。如果不为空，则将它们相加的结果打印到前台。

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace Ajax
    {
        /// <summary>
        /// Handler1 的摘要说明
        /// </summary>
        public class Handler1 : IHttpHandler
        {
     
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";//用于设置编码
                string num1 = context.Request.Form["num1"];//如果是get方式应该用context.Request.QueryString
                string num2 = context.Request.Form["num2"];
                if (!(string.IsNullOrEmpty(num1) || string.IsNullOrEmpty(num2)))
                {
                    context.Response.Write(int.Parse(num1) + int.Parse(num2));
                }
            }
     
            public bool IsReusable//用于线程安全
            {
                get
                {
                    return false;
                }
            }
        }
    }

之后的Default.aspx完全是前台HTML+javascript的内容，从两个文本框的获取参数，将其传到Calculate.ashx里面，再将结果打印到id为result的span节点里面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>
     
    <!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 id="Head1" runat="server">
        <title>Ajax</title>
        <script type="text/javascript" src="jquery-1.8.3.js"></script>
    </head>
    <body>
        <input type="text" id="num1" />+<input type="text" id="num2" /><button onclick="calculate()">=</button><span id="result"></span>
    </body>
    <script type="text/javascript">
        function calculate() {
            var num1 = $("#num1").val();
            var num2 = $("#num2").val();
            if (isNaN(num1) || isNaN(num2)) {
                alert("你输入的不是数！");
            }
            else {
                $.ajax({
                    type: 'post',
                    url: 'Calculate.ashx',
                    dataType: "html",
                    data: {
                        num1: num1,
                        num2: num2
                    },
                    success: function (data) {
                        $("#result").html(data);
                    },
                    error: function () {
                        alert("出错了！请稍候再试！");
                    }
                });
            }
        }
    </script>
    </html>

可以看到ASP.NET，利用jQuery与.ashx完成简单的Ajax与其它编程语言几乎没有区别，

唯一需要的是，必须将Ajax的后台处理代码写在.ashx文件，而不是.aspx中的Page_Load方法，如果.aspx没有被访问，仅传过参数进去，是不会触发Page_Load方法的。

利用jQuery与.ashx完成简单的Ajax的更多相关文章

  1. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...

  2. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  3. 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...

  4. 利用JQUERY实现多个AJAX请求等待

    利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...

  5. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  6. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  7. 利用jquery对ajax操作，详解原理（附代码）

    1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...

  8. 利用JQuery直接调用asp.net后台的简单方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  9. 【javascript】利用jquery ajaxPrefilter防止ajax重复提交

    利用jquery ajaxPrefilter中断请求 var pendingRequests = {}; $.ajaxPrefilter(function( options, originalOpti ...

随机推荐

  1. Python random模块sample、randint、shuffle、choice随机函数

    一.random模块简介 Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等. 二.random模块重要函数 1 ).ra ...

  2. py-day1-4 python基本数据类型2

    # replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...

  3. iOS-微信分享多张图片（UIActivityViewController多图分享和多图分享失败）

    前言 微信分享到朋友圈,可分享的类型有:文字类型.图片类型.音乐类型.视频类型和网页类型,但是我们在做图片分享的时候发现微信给的API只能分享一张图片,达不到一些APP的需求,而产品汪或者Boss想要 ...

  4. Linux之异步通知机制分析

    1.概念: 异步通知机制:一旦设备就绪,则主动通知应用程序,这样应用程序根本就不需要查询设备状态,是一种“信号驱动的异步I/O”.信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号 ...

  5. Vivado使用技巧(1)

    Vivado使用技巧 (1) 1. 2.复位准则: 3. 4. 5. 6. 7. 8.

  6. java小程序（课堂作业04）

    请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图. 1,设计思想: 先输入索要加密的字符串由于此程序比较基础所以只考虑大写字母,然后用toCharAr ...

  7. [转]Python中出错：ImportError: No module named win32com.client

    Python中出错:ImportError: No module named win32com.client [问题] [已解决]Python中处理操作Excel中的图表(Chart,Graph) 的 ...

  8. [转]Eclipse快捷键 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 5 4 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的 ...

  9. 《JavaScript设计模式与开发》笔记 1.面向对象的JavaScript

    多态 封装 原型模式 基于原型模式的继承javascript对象 1.多态 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发哦少年宫同一个消 ...

  10. php 安装mongo扩展（其他扩展同理）

    很多次安装mogo扩展不成功,总结出来,无非就是一个原因.对应的版本选择不正确 简单来说这篇文章就是来教你如何选择php对应的mongo.ll版本 查看phpinfo https://pecl.php ...