Ajax非同步呼叫詳解執行個體解析

Ajax更著重在前端頁面非同步顯示後台資料庫裡的欄位， 主體思想與上篇相似，重點是DAL層得到預存程序中返回的表集合DataSet,在一般預存程序中拼接字串時，將表一行的資料分別做成索引值對的形式

1.前端頁麵包含指令碼（ajax）和基本的HTML標記 以方便大家對應尋找和理解

代碼如下

複製代碼

function InitData() {                                            //頁面載入時調用此事件              $.ajax({                   type: "POST",                   url: "/AjaxRequest/GetUserList.ashx",             //連結到相應的一般處理常式                   data: { state: 1 },                   success: function (data) {                       if (data != null) {                           var html = "<li ><span  class="lb1">ID</span><span>使用者名稱</span><span >建立時間 </span><span >執行操作</span></li>";                         //拼接字串標籤並放入變數html裡，注意：拼接時“需要轉義-如第一個span裡的類                           $.each(data, function (i, n) {                         //jquery迴圈輸出資料行表裡的每行資料，如果用javascript可以考慮用for迴圈                                  html += "<li><span  class="lb1">" + (1 + i) + "</span><span >" + n.USER_Name + "</span><span >" + n.USER_Time + "</span><span ><a href="javascript:editProvince('" + this.USER_Name + "'," + this.USER_ID + "," + (i + 1) + ")">[編輯]</a></span><span ><a href="javascript:deleteProvince(" + this.USER_ID + ");" OnClick="javascript:return confirm('您確定要刪除 "+this.USER_Name+"?');" >[刪除]</a></span></li>"; //依然是拼接要顯示的標記，注意：變數html+=，另外如果是內容部分或者每行不一樣的部分要用變數  //變數用data[i].鍵（就可以得到url指向的檔案中json對象裡該鍵對應的值）的形式，鍵是指一般處理常式檔案中拼接JSON對象時的索引值對，  //n在此處表示data[i]（是jquery離得each用法，如果是再javascript中可以用data[i].USER_ID）                          });                          $("#list_ul").append(html);               //擷取要顯示列表的ul，用append添加拼接好的標籤字串                                               }                    else {                        alert("Error!");                     }                  }              })          }

2.一般處理常式GetUserList.ashx，將從底層得到的DataSet裡的資料轉換成json對象返回給調用頁面

代碼如下

複製代碼

public void ProcessRequest(HttpContext context)          {              context.Response.ContentType = "text/plain";              string result =" [";              string name=string.Empty;              int? state = null;              DateTime time;              Int Id=0;              if (!string.IsNullOrEmpty(context.Request["state"]))                  state = Convert.ToInt32(context.Request["state"]);              DataSet _set=new BLL.Province().GetProvinceList(state);              foreach(DataRow dr in _set.Tables[0].Rows)              {                name=Convert.ToString(dr["USER_Name"]);                Id=Convert.ToInt32(dr["USER_ID"]);                time=Convert.ToDateTime(dr["USER_Time"]);  result+="{"USER_Name":""+name+"","USER_ID":""+Id+"","USER_Time":""+time+""},";              }              resul= result.Trim(",")+"] ";              context.Response.Write(result);          }