c# asp.net利用ajax和ashx文件进行交互

.ashx 文件用于写web handler的。.ashx文件与.aspx文件类似，可以通过它来调用HttpHandler类，它免去了普通.aspx页面的控件解析以及页面处理的过程。其实就是带HTML和C#的混合文件。

.ashx文件适合产生供浏览器处理的、不需要回发处理的数据格式，例如用于生成动态图片、动态文本等内容。

新建一个ashx文件，名字为handler2.ashx,内容如下

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;

public class Handler2 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Write("Hello World");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

HTML里添加代码如下。

<label>用户名：</label><input id="iptInsertUser" />
<label>密码：</label><input id="iptInsertPassword" />
<button id="btnInsert" >确认</button>
<script type="text/javascript">
    $("#btnInsert").on("click", function () {
        var user = $('#iptInsertUser').val();
        var password = $('#iptInsertPassword').val();
        $.ajax({
            type: "post",
            url: "/Handler2.ashx",
            data: {
                "user": user,
                "password": password,
            },
            success: function (data) {alert(data);},
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status); 
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    });
</script>

此时点击确定会弹出“Hello World”，就是handler2.ashx中context.Response.Write(“Hello World”);内容,这说明ajax传输完成返回的function就是Response.Write的内容。

这时修改handler2.ashx。让其显示我们输入的内容。用request接收ajax传输过来的数据，保留context.Response.Write(“Hello World”)命令，将"Hello World"替换成想要输出的内容就可以了。

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;

public class Handler2 : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        string user = context.Request["user"];
        string password = context.Request["password"];
        context.Response.Write("姓名：" + user + "密码：" + password);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

这时我们随意输入内容后，点击确定显示如下内容。这样就基本完成了数据的传输。

但是在添加一些代码后，发现不弹出对话框了。用谷歌浏览器“F12”查看，显示如下，我是嵌套在别网页里才显示，单独打开这个网页看不到这条提示，就闪一下就没了。

网上百度了canceled的情况，发现有说是ajax没有请求完成就切换网页造成的，我想想应该是这样，我的两个input在点击确定后就变成空的了，开始因为内容少没有问题，后来因为内容增加，交互数据的时间增加了，导致数据没有传回来就刷新了，然后在百度上搜到了需要在js中增加一个命令。
event.preventDefault();
将点击按钮的命令修改为如下

<script type="text/javascript">
    $("#btnInsert").on("click", function (event) {
    	event.preventDefault();
        var user = $('#iptInsertUser').val();
        var password = $('#iptInsertPassword').val();
        $.ajax({
            type: "post",
            url: "/Handler2.ashx",
            data: {
                "user": user,
                "password": password,
            },
            success: function (data) {alert(data);},
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status); 
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    });
</script>

这样点击确定后两个input内容不会刷新了，我要显示的内容也显示了。

为了与echarts结合，我修改了代码如下：

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;

public class Handler2 : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        string user = context.Request["user"];
        string password = context.Request["password"];
        //context.Response.Write("姓名：" + user + "密码：" + password);
        var newObj = new
        {
            user = user,
            password = password,
        };
        context.Response.Write(newObj);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

这样点击确定以后就显示如下内容了。

但是我导入数据库，不管输入什么都显示echarts的相关数据时就不行了，显示如下：

修改ashx代码添加string json = JsonConvert.SerializeObject(newObj);就解决问题了。

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Data;
using System.Data.OleDb;
using Newtonsoft.Json;

public class Handler2 : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        string user = context.Request["user"];
        string password = context.Request["password"];
        //context.Response.Write("姓名：" + user + "密码：" + password);
        
        //……导入数据库部分省略……
        
        var newObj = new
        {
            xList = xList, //X轴集合
            series = seriesList, //series集合
            legend = legendList //legend集合
        };
        string json = JsonConvert.SerializeObject(newObj);
        context.Response.Write(json);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

另外说下在试验的过程中遇到的几个问题，
千万不要设置 contentType: ‘application/json;charset=UTF-8’,
这样是传递不过去数据的。

如果设置ajax的dataType: ‘text’,则显示如下。

如果设置ajax的 dataType: ‘json’,则显示如下。

要想将Object显示为内容，就在ajax中输入data = JSON.stringify(data)

<script type="text/javascript">
    $("#btnInsert").on("click", function (event) {
    	event.preventDefault();
        var user = $('#iptInsertUser').val();
        var password = $('#iptInsertPassword').val();
        $.ajax({
            type: "post",
            url: "/Handler2.ashx",
            dataType: 'json',
            data: {
                "user": user,
                "password": password,
            },
            success: function (data) {
            	data = JSON.stringify(data)
            	alert(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status); 
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    });
</script>

这样就能显示了。

如果ajax的dataType: ‘text’,设置data = JSON.stringify(data)，就显示这样了。

data = JSON.stringify(data)，把数据转化成json格式，
data = JSON.parse(data)，把json格式转化回来。