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.通过构造字符串的方式,将后 ...
随机推荐
- c++容器使用总结（转载）
目录 ==================================================== 第一章 容器 第二章 Vector和string 第三章 关联容器 第四章 迭代器 第五 ...
- LeeCode-Happy Number
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- Hibernate中save、saveorupdate、persist方法的区别
在Hibernate中,save().saveOrUpdate()和persist()都是用于将对象保存到数据库中的方法,但其中有些细微的差别.例如,save()只能INSERT记录,但是saveOr ...
- LINQ to SQL和Entity Framework对照
LINQ to SQL和Entity Framework都是一种包括LINQ功能的对象关系映射技术.他们之间的本质差别在于EF对数据库架构和我们查询的类型实行了更好的解耦. 使用EF,我们查询的对象不 ...
- 虚拟化之KVM的安装篇
1,在安装KVM之前,首先需要在自己的电脑开启cpu虚拟化技术(这个需要BIOS中设置). 如下操作都是在本人虚拟机中设置,所以可以看到我多添加一块磁盘,目的是用来做kvm虚拟机的磁盘. 另外,虚拟机 ...
- FCKeditor
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器.它志于轻量化,不需要太复杂的安装步骤即可使用. 它可和PHP.JavaScript.ASP.ASP.NET.Col ...
- JS 不定函数参数argument的用法
本篇文章只要是对js的隐含参数(arguments,callee,caller)使用方法进行了介绍. arguments arguments 该对象代表正在执行的函数和调用它的函数的参数. [func ...
- 2014年1月9日 Oracle 内存与结构
Oracle启动时为启动一个实例 主要为 实例 SVG 数据库文件 其它文件 1.Oracle: 内存 进程 其他文件 1.1 SVG内存(Cache) 1.1.1 共享池(Shared Poo ...
- 计算UILabel的高度
//计算文本高度 NSString *lltxt =[[NSString alloc]initWithFormat:@"浏览:%@",[strJson objectForKey:@ ...
- xml 文件的增删改查
序列化和反序列化helper using System; using System.Collections.Generic; using System.Linq; using System.Text; ...