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.通过构造字符串的方式,将后 ...
随机推荐
- WebGL 初探
官方网站:http://webglfundamentals.org/ WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenG ...
- 【转】V4L2+swscale+X264+live555实现流媒体服务端
写这边博客,一方面是因为自己在做项目的时候不太做笔记,怕以后自己忘记了.另一方面,是让正在寻求资料的同行少走一点弯路吧.不能说我这个方案怎么的好,至少是有一点参考价值的.这边博客需要一定基础才能看明白 ...
- OpenCV MFC 模块间通信
1. 新建MFC项目 点击完成. 2. 添加按钮 在"工具箱"中找到"Button"控件,添加至界面: 2. 配置opencv, 添加colordetecto ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域
面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...
- nginx : TCP代理和负载均衡的stream模块
一直以来,Nginx 并不支持tcp协议,所以后台的一些基于TCP的业务就只能通过其他高可用负载软件来完成了,比如Haproxy. 这算是一个nginx比较明显的缺憾.不过,在1.90发布后这个认知将 ...
- Oracle官方版Entity Framework
千呼萬喚始出來! Oracle官方版Entity Framework問市,邁入開發新時代 自從我得了一種"不用LINQ就不會寫資料庫程式"的病,為了滿足工作上要搭配Oracle(雖 ...
- SQL Server2008R2安装失败问题之语言包问题
今天安装SQL Server2008 的时候出现了,如下的的问题,安装过程在ExcuteStandardTimingsWorkflow时候报错,结束安装. 提示: ...
- 使用Marshal.Copy把Txt行数据转为Struct类型值
添加重要的命名空间: using System.Runtime.InteropServices; 先建立结构相同(char长度相同)的Struct类型用于转换: [StructLayout(Layou ...
- 对Textbox的值转换为带千位符和小数的Decimal字符串
以下Function可以用于textbox的KeyUp事件: 2014-06-06 发现旧版IE不支持selectionStart还有字符串的"[]"索引获取值, 已经修复这个bu ...