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 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;
}
}
}
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();
将点击按钮的命令修改为如下
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
这样点击确定后两个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;
}
}
}
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)
<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>
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
这样就能显示了。
如果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