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

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;
}
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
此时点击确定会弹出“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 bool IsReusable {
get {
return false;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
这时我们随意输入内容后，点击确定显示如下内容。这样就基本完成了数据的传输。

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

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

为了与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;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
这样点击确定以后就显示如下内容了。

但是我导入数据库，不管输入什么都显示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;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
另外说下在试验的过程中遇到的几个问题，
千万不要设置 contentType: ‘application/json;charset=UTF-8’,
这样是传递不过去数据的。

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

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

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

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

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

出现这个提示就需要用data = JSON.parse(data)，把json格式转化回来。
当然也可能是echarts的数据对应有问题。。我就发现网上的legend取消就正常显示了。

if (obj) {
options.xAxis.data = obj.xList; //给X轴数据
options.series = obj.series; //给series数据
//options.legend.data = obj.legend; //给legend数据
myChart.hideLoading(); //隐藏动画加载效果
myChart.setOption(options); //设置图表实例的配置项以及数据
}
————————————————
版权声明：本文为CSDN博主「●紫枫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41053472/article/details/116596621

posted @ 2021-10-27 15:13 vba是最好的语言阅读(310) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

公告