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


  1 一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求。
  2 
  3 当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习。
  4 
  5 今天就用ashx来接收页面请求,并调用后台,然后返回数据给前台,用jquer .ajax提交请求,接收ashx返回的数据。
  6 
  7  
  8 
  9 例子:
 10 
 11         例子是要实现页面加载时从数据库读取数据,并把数据放到一个下拉列表中。(因为是用ajax,就建html页面就行了,一直不喜欢aspx页面,感觉它太臃肿了。)
 12 
 13 一.准备工作:
 14 
 15 1.建web应用程序aspnetAjax
 16 
 17 2.建index.htm
 18 
 19 3.建个js文件夹,把jquery.js放进去,
 20 
 21 4.建ajax文件夹,里面放ashx
 22 
 23 5.在js文件夹建index.js,一般我们都是一个页面对应一个js
 24 
 25 6.在ajax文件夹,建IndexHandler.ashx,一般一个js页面对应一个一般用户控件,这样层次感很强,也很好维护。
 26 
 27  
 28 
 29 二.html页面
 30 
 31    html页面就简单了,我们要用ajax读后台做个下拉列表,所以页面就放个DIV就行了。其他的交给js.
 32 
 33  
 34 
 35 
 36 HTML代码
 37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 38 <html xmlns="http://www.w3.org/1999/xhtml" >
 39 <head>
 40     <title>测试</title>
 41 
 42     <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script>
 43 
 44     <script src="js/index.js" type="text/javascript"></script>
 45 
 46 </head>
 47 <body>
 48     企业性质<div id="vocaspec"> </div>
 49     行业类型<div id="industr"> </div>      
 50 </body>
 51 </html>
 52 
 53  
 54 
 55  
 56 
 57 编写IndexHandler.ashx代码
 58 
 59  
 60 
 61 
 62 代码
 63 namespace aspnetAjax.ajax
 64 {
 65     /// <summary>
 66     /// $codebehindclassname$ 的摘要说明
 67     /// </summary>
 68 
 69     public class IndexHandler : IHttpHandler
 70     {
 71 
 72         public void ProcessRequest(HttpContext context)
 73         {
 74            context.Response.ContentType = "application/json";
 75            //接收提交过来的meth参数
 76             string meth = context.Request.Params["meth"].ToString(); 
 77             //根据参数调用不同的方法
 78             switch (meth) 
 79             {
 80                 case "load":
 81                     loadjson(context);
 82                     break;
 83                 case "add":
 84                     add(context);
 85                     break;
 86             }        
 87        }
 88 
 89         public bool IsReusable
 90         {
 91             get
 92             {
 93                 return false;
 94             }
 95         }
 96 
 97        //页面加载方法,调用BLL,获得数据
 98          private void loadjson(HttpContext context) 
 99         {
100             //实例BLL
101             VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL();
102             BLL.Owner ownerbll = new GYXMGL.BLL.Owner();
103              
104              DataSet ds = vocaSpec.GetList("");
105              DataSet dsindustr = ownerbll.Getcharcte();
106 
107              //实例一个StringBuilder 用来拼接一个json数据
108              StringBuilder sbvoca = new StringBuilder();
109 
110             if (ds != null && ds.Tables[0].Rows.Count > 0)
111             {
112                 sbvoca.Append("{\"voce\":[");
113                 int i = 1;
114                 int count = ds.Tables[0].Rows.Count;
115                 foreach (DataRow dr in ds.Tables[0].Rows) 
116                 {
117                     if (i == count)
118                     {
119                         sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
120                     }
121                     else
122                     {
123                         sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
124                     }
125                     i++;
126                 }
127                 sbvoca.Append("]");
128             }
129             if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0) 
130             {
131 
132                 sbvoca.Append(",\"industr\":[");
133                 int i = 1;
134                 int count = dsindustr.Tables[0].Rows.Count;
135                 foreach (DataRow dr in dsindustr.Tables[0].Rows)
136                 {
137                     if (i == count)
138                     {
139                         sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
140                     }
141                     else 
142                     {
143                         sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
144                     }
145                     i++;
146                 }
147                 sbvoca.Append("]");
148             }
149             sbvoca.Append("}");
150             context.Response.Write(sbvoca.ToString());
151             
152             context.Response.End();
153         }
154 
155     }
156 }
157 
158  
159 
160  
161 
162 我们把index.js改下
163 
164  
165 
166 
167 代码
168 $(document).ready(function() {
169     $.ajax({
170         type: "POST",
171         url: "../ajax/NewOwnerHandler.ashx",
172         //我们用text格式接收
173         dataType: "text",
174         data: "meth=load",
175         success: function(msg) {
176             alert(msg);
177             //显示后台数据
178             $("#vocaspec").html(msg);
179             // $("#industr").html(industr);
180         }
181     });
182 });
183 
184  
185 
186  
187 
188 我可以看到如下数据,就是ashx中response给我们的json格式数据,现在我们要把这些数据
189 
190 显示在下拉列表中。就要遍历json中的数组。
191 
192  
193 
194 
195 代码
196 {
197 "voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],
198 "industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]
199 }
200 
201  
202 
203  
204 
205 修改index.js代码,遍历json数据把数据显示成下拉列表
206 
207  
208 
209  
210 
211 
212 代码
213 $(document).ready(function() {
214     $.ajax({
215         type: "POST",
216         url: "../ajax/NewOwnerHandler.ashx",
217         //json格式接收数据
218         dataType: "json",
219         //指点后台调用什么方法
220         data: "meth=load",
221 
222         success: function(msg) {
223              //实例2个字符串变量来拼接下拉列表
224                var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>";
225                var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>";
226               //使用jquery解析json中的数据
227                $.each(msg.voce, function(n, value) {
228                      vocaspec += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
229                      vocaspec += ("</option>");
230                     });
231                 $.each(msg.industr, function(n, value) {
232                      industr += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
233                       industr += ("</option>");
234                    });
235              industr += ("</select>");
236 
237              $("#vocaspec").html(vocaspec);
238             $("#industr").html(industr);
239         }
240     });
241 });
242 
243  
244 
245  
246 
247 ------------------------
248 
249 ok,完结!@
250 
251  
252 
253 --这个实例涉及到的知识点
254 
255 1.使用一般处理程序,接收request。并可以使用response数据
256 
257 string meth = context.Request.Params["meth"].ToString();
258 
259 因为一般处理程序
260 
261 public class IndexHandler : IHttpHandler
262 
263 他实现IHttpHandler接口
264 
265 2.json数据格式
266 
267 3.使用jquery ajax,并用jquery解析json数据。

优质内容筛选与推荐>>
1、js中的内置对象、本地对象、宿主对象以及相关用法
2、Spark SQL 1.3.0 DataFrame介绍、使用及提供了些完整的数据写入
3、js Math对象方法 (个人学习笔记)
4、MFC树控件CTreeCtrl
5、2016/4/7 省市县三级联动 下拉菜单式


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号