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.通过构造字符串的方式,将后 ...

随机推荐

Path Sum 解答
Question Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that addi ...
MongoDB appendix
mongo 是数据库shell.一般假定它和mongod 运行在同一台机器上,还假定mongod 绑定了默认端口. eg. mongo staging.example.com:20000,这样就会 ...
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活使用Canvas实现动画效果
国际C语言混乱代码大赛代码赏析(一)【转】
本文转载自:http://blog.csdn.net/ce123_zhouwei/article/details/9073869 国际C语言混乱代码大赛代码赏析(一) 近段时间在看<C专家编程& ...
Splay POJ3468（老题新做）
A Simple Problem with Integers Time Limit:5000MS Memory Limit:131072KB 64bit IO Format:%I64d ...
mysql binlog参数设置
1.mysql有许多系统变量,可以设置,系统变量设置不同,不同的系统将导致执行状态. 故mysql提供两组命令,分别查看系统设置和执行状态. 1.系统设置: SHOW [GLOBAL | SESSIO ...
[bzoj2301: [HAOI2011]Problem b] 乞讨
</pre><pre code_snippet_id="507886" snippet_file_name="blog_20141104_2_53831 ...
H5单页面架构：backbone + requirejs + zepto + underscore
首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...
ADO.net基础学习总结
ADO.net是一门.net连接.操作数据库的技术释放资源:凡是实现了idisposable借口的类都需要用using来释放资源 using() { } 连接数据库 //创建数据库连接: usi ...
css权重计算
第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为100. 第三等:代表类,伪类和属性选择器,如.content,权值为1 ...

asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析

asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析的更多相关文章

随机推荐

热门专题