asp.net中，我們使用ashx獲取資料列表，在前端使用$.ajax()解析
阿新 • • 發佈：2019-02-06
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":