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;
}
}
}
<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;
}
}
}
这时我们随意输入内容后，点击确定显示如下内容。这样就基本完成了数据的传输。
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内容不会刷新了，我要显示的内容也显示了。
<%@ 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;
}
}
}
修改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格式转化回来。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
