asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析
一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求。
当然asp.net mvc就是类似struts的东西吧，不过还没来得及学习。
今天就用ashx来接收页面请求，并调用后台，然后返回数据给前台，用jquer .ajax提交请求，接收ashx返回的数据。
例子：
例子是要实现页面加载时从数据库读取数据，并把数据放到一个下拉列表中。（因为是用ajax，就建html页面就行了，一直不喜欢aspx页面，感觉它太臃肿了。）
一.准备工作：
.建web应用程序aspnetAjax
.建index.htm
.建个js文件夹，把jquery.js放进去，
.建ajax文件夹，里面放ashx
.在js文件夹建index.js，一般我们都是一个页面对应一个js
.在ajax文件夹，建IndexHandler.ashx，一般一个js页面对应一个一般用户控件，这样层次感很强，也很好维护。
二.html页面
html页面就简单了，我们要用ajax读后台做个下拉列表，所以页面就放个DIV就行了。其他的交给js.
HTML代码
<!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>
<title>测试</title>
<script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
企业性质<div id="vocaspec"> </div>
行业类型<div id="industr"> </div>
</body>
</html>
编写IndexHandler.ashx代码
代码
namespace aspnetAjax.ajax
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
public class IndexHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
//接收提交过来的meth参数
string meth = context.Request.Params["meth"].ToString();
//根据参数调用不同的方法
switch (meth)
{
case "load":
loadjson(context);
break;
case "add":
add(context);
break;
}
}
public bool IsReusable
{
get
{
return false;
}
}
//页面加载方法，调用BLL，获得数据
private void loadjson(HttpContext context)
{
//实例BLL
VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL();
BLL.Owner ownerbll = new GYXMGL.BLL.Owner();
DataSet ds = vocaSpec.GetList("");
DataSet dsindustr = ownerbll.Getcharcte();
//实例一个StringBuilder 用来拼接一个json数据
StringBuilder sbvoca = new StringBuilder();
if (ds != null && ds.Tables[].Rows.Count > )
{
sbvoca.Append("{\"voce\":[");
int i = ;
int count = ds.Tables[].Rows.Count;
foreach (DataRow dr in ds.Tables[].Rows)
{
if (i == count)
{
sbvoca.Append("{\"code\":\"" + dr[] + "\",\"name\":\"" + dr[] + "\"}");
}
else
{
sbvoca.Append("{\"code\":\"" + dr[] + "\",\"name\":\"" + dr[] + "\"},");
}
i++;
}
sbvoca.Append("]");
}
if (dsindustr != null && dsindustr.Tables[].Rows.Count > )
{
sbvoca.Append(",\"industr\":[");
int i = ;
int count = dsindustr.Tables[].Rows.Count;
foreach (DataRow dr in dsindustr.Tables[].Rows)
{
if (i == count)
{
sbvoca.Append("{\"code\":\"" + dr[] + "\",\"name\":\"" + dr[] + "\"}");
}
else
{
sbvoca.Append("{\"code\":\"" + dr[] + "\",\"name\":\"" + dr[] + "\"},");
}
i++;
}
sbvoca.Append("]");
}
sbvoca.Append("}");
context.Response.Write(sbvoca.ToString());
context.Response.End();
}
}
}
我们把index.js改下
代码
$(document).ready(function() {
$.ajax({
type: "POST",
url: "../ajax/NewOwnerHandler.ashx",
//我们用text格式接收
dataType: "text",
data: "meth=load",
success: function(msg) {
alert(msg);
//显示后台数据
$("#vocaspec").html(msg);
// $("#industr").html(industr);
}
});
});
我可以看到如下数据，就是ashx中response给我们的json格式数据，现在我们要把这些数据
显示在下拉列表中。就要遍历json中的数组。
代码
{
"voce":[{"code":"","name":"农林水利"},{"code":"","name":"军工"},{"code":"","name":"农林"},{"code":"","name":"水利(电)"},{"code":"","name":"水电站"},{"code":"","name":"输变线"},{"code":"","name":"煤矿"},{"code":"","name":"气田"},{"code":"","name":"公路"},{"code":"","name":"铁路"},{"code":"","name":"民航"},{"code":"","name":"能源"},{"code":"","name":"信息产业"},{"code":"","name":"化工"},{"code":"","name":"机械"},{"code":"","name":"冶金"},{"code":"","name":"有色金属"},{"code":"","name":"建材"},{"code":"","name":"医药"},{"code":"","name":"轻工"},{"code":"","name":"农牧产品深加工"},{"code":"","name":"交通"},{"code":"","name":"通讯"},{"code":"","name":"特色产业"},{"code":"","name":"城市基础设施"},{"code":"","name":"商贸流通"},{"code":"","name":"旅游"},{"code":"","name":"文体卫"}],
"industr":[{"code":"","name":"国有"},{"code":"","name":"私人"}]
}
修改index.js代码，遍历json数据把数据显示成下拉列表
代码
$(document).ready(function() {
$.ajax({
type: "POST",
url: "../ajax/NewOwnerHandler.ashx",
//json格式接收数据
dataType: "json",
//指点后台调用什么方法
data: "meth=load",
success: function(msg) {
//实例2个字符串变量来拼接下拉列表
var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>";
var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>";
//使用jquery解析json中的数据
$.each(msg.voce, function(n, value) {
vocaspec += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
vocaspec += ("</option>");
});
$.each(msg.industr, function(n, value) {
industr += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
industr += ("</option>");
});
industr += ("</select>");
$("#vocaspec").html(vocaspec);
$("#industr").html(industr);
}
});
});
------------------------
ok,完结！@
--这个实例涉及到的知识点
.使用一般处理程序，接收request。并可以使用response数据
string meth = context.Request.Params["meth"].ToString();
因为一般处理程序
public class IndexHandler : IHttpHandler
他实现IHttpHandler接口
.json数据格式
.使用jquery ajax,并用jquery解析json数据。
asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析的更多相关文章
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据
WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 (原生AJAX请求,写法一) <%@ Page Langu ...
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据(转)
WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 (原生AJAX请求,写法一) <%@ Page Langu ...
- 【转载】ASP.NET中Server.MapPath方法获取网站根目录总结
在ASP.NET网站应用程序中,可以通过Server.MapPath方法来获取跟服务器有关的目录信息,如获取网站的根目录.获取当前代码文件所在的目录路径.获取当前代码所在路径的上级路径等.Server ...
- [ionic开源项目教程] - 第4讲 通Service层获取数据列表
第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...
- 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子
备注:这是我辅导的一个项目开发组的一个例子,用文章的方式分享出来,给更多的朋友参考.其实我们这几年的项目中,都不怎么使用服务器控件的形式了,而是更多的采用MVC这种开发模式.但是,如果项目的历史背景是 ...
- asp.net mvc Areas 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
- Asp.Net使用代理IP远程获取数据
/// <summary> /// 远程获取数据 /// </summary> /// <param name="url">url</pa ...
- ASP.NET之电子商务系统开发-1(数据列表)
一.前言 首先声明的是,这是我第一个与别人合作的.net项目,另一个人做的是后台管理,我做的前台,这是一个电子商务的系统,主要实现的功能是查看商品以及购物功能. 二.开始 首先看一下我截取的项目部分商 ...
- 向.net后端发送请求获取数据，在前端动态填充表格
实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...
随机推荐
- vi常用命令笔记
1.Vi 删除全部内容,删除某行到结尾,删除某段内容 (1)转到文件指定行 nG (2)删除所有内容(先用G转到文件尾) ,使用: $G :1,.d (3)删除第9行到第200行的内容(先用200G转 ...
- Phoenix中Sequence的用法
Phoenix--HBase的JDBC驱动 序列(Sequence)是Phoenix提供的允许产生单调递增数字的一个SQL特性,序列会自动生成顺序递增的序列号,以实现自动提供唯一的主键值. 使用C ...
- 分享一个BUG
这段时间在做改版的时候,遇上一个非常莫名其妙的bug,最终是被我的一个后端同事给发现和指正的.这个bug就是,一个js方法在ie7和ie8下面报 SCRIPT:1010 缺少标示符的错误.这个错误我百 ...
- 虚拟化之KVM virsh常用命令篇
1,查看运行的虚拟机 virsh list 2,查看所有的虚拟机(关闭和运行的虚拟机) virsh list --all 3,连接虚拟机 virsh console +域名(虚拟机的名称) 4,退出虚 ...
- 初探JS-html5移动端发送指定内容短信到指定号码
原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于 ...
- 基于.Net的单点登录(SSO)解决方案
前些天一位朋友要我帮忙做一单点登录,其实这个概念早已耳熟能详,但实际应用很少,难得最近轻闲,于是决定通过本文来详细描述一个SSO解决方案,希望对大家有所帮助.SSO的解决方案很多,但搜索结果令人大失所 ...
- sql server数据库区分大小写设置
数据库表中字段alter Table TableName 区分大小写 ALTER Column ColumnName VARCHAR(50) COLLATE Chinese_PRC_CS_AS不区分大 ...
- DataGridView显示行号
//可以在DataGirdView的RowPostPaint事件中进行绘制. //如:添加以下方法代码 private void DrawRowIndex(object sender, DataGri ...
- linux系统学习笔记：文件、目录、用户
本篇主要从stat函数开始,逐个说明stat结构的每一个成员,以此来了解文件的所有属性.同时将说明修改这个属性的各个函数. 一.文件 使用stat函数族得到和文件有关的信息结构. #include & ...
- C++标准程序库读书笔记-第二章新的语言特性
1.基本类型的显式初始化 如果采用不含参数.明确的constructor(构造函数)调用语法,基本型别会被初始化为零: int i1; //undefined value int i2 = int() ...