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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    路由
    客户端如何调用
    第一个简单的DEMO
    Web API初印象
    项目开发中经常使用的缓存
    EF的Model First
    如何计算代码的运行性能
    使用Obsolete特性来标记方法过时或弃用
    nodeJs实现文件上传,下载,删除
    node 部署教程二
  • 原文地址:https://www.cnblogs.com/guoqiang1/p/10959180.html
Copyright © 2011-2022 走看看