asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析
浏览数：234 /
时间：2015年06月09日
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数据。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
