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.通过构造字符串的方式,将后 ...
随机推荐
- easyui 表单验证validatetype——支持自定义验证
easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...
- hdu 4619 Warm up 2 ( 二分图最大匹配 )
题目:Warm up 2 题意:有横竖两种方式放着的多米诺骨牌,相同方向的不可能重叠,但是横放和竖放 的牌可能重叠.移走重叠的牌使剩下的牌最多. 分析:二分图匹配:最大独立集= ...
- Python基础教程学习（四）类的创建与继承
类中可以有方法,类外也可以有函数,其实类就是一种封装, Python中可以自己定义一个函数,一可以把这个函数在类中封装成一个方法, 其中的属性和方法自然就从父类中继承来了, 要想获得多个类的属性和功能 ...
- ubuntu下的Samba配置：使每个用户可以用自己的用户名和密码登录自己的home目录
http://blog.csdn.net/fly_qj/article/details/21744797 1.先要安装Samba sudo apt-get install samba openssh- ...
- man/ls/clock/date/echo笔记
login: 用户名:用户ID 认证机制:Authentication授权:Authorization审计:Audition (日志) prompt,命令提示符:命令:magic numb ...
- HMM的学习笔记1：前向算法
HMM的学习笔记 HMM是关于时序的概率模型.描写叙述由一个隐藏的马尔科夫链随机生成不可观測的状态随机序列,再由各个状态生成不可观測的状态随机序列,再由各个状态生成一个观測而产生观測的随机过程. HM ...
- LAMP的安装
一,LAMP的安装流程:mysql.apache.php或者apache.mysql.php.php放到最后的原因是,php在编译安装的时候是依赖于前2者的. 二,Mysql的安装: 1.下载mysq ...
- Splash界面布局与代码实现(一)
xml界面布局代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns ...
- Eclipse安装与搭建Maven
Maven的具体参考书可以看:<Maven实战> 下载maven可以到:http://maven.apache.org/ Maven的eclipse基本使用可以在这里看到:http://w ...
- AngularJS如何使用ngRepeat过滤排序
NG重复指令,带过滤器,像这样: <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitT ...