zoukankan      html  css  js  c++  java
  • 【ASP.NET】利用jQuery与.ashx完成简单的Ajax

    https://blog.csdn.net/yongh701/article/details/50481072

    版权声明:本文为博主原创文章,未经博主允许,欢迎随意转载,标好作者+原文地址就可以了!感谢欣赏!觉得好请回个贴! https://blog.csdn.net/yongh701/article/details/50481072
    在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方法的。
    ---------------------
    作者:yongh701
    来源:CSDN
    原文:https://blog.csdn.net/yongh701/article/details/50481072
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之六 多点触控
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之九 定位
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之七 重力感应
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之五 保存数据的几种方式
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之八 照相机
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之三 Application 配置详解
    Adobe Flash Builder 4.5 Android Air 程序开发系列 之四 打开与关闭应用程序是的保存数据
    ADOBE FLASH BUILDER 4.6 IOS 开发之部署与调试
    [译] 高性能JavaScript 1至5章总结
    页签及盒子的web标准实现
  • 原文地址:https://www.cnblogs.com/guoqiang1/p/10959180.html
Copyright © 2011-2022 走看看