數據的動態加載可以使用戶非常愉快，因此在許多情況下，數據的可視化總是有一些動態加載，本文是錯新技術頻道小編為大家帶來的Ajax實現動態加載數據的演示，一起來看看吧！
前言：
1.這個隨筆實現了一個Ajax動態加載的例子。
2.使用.net 的MVC框架實現。
3.這個例子重點在前后臺交互，其它略寫。
開始：
1.控制器ActionResult代碼（用于顯示頁面）
/// <summary> /// 電話查詢頁面 /// </summary> /// <returns></returns> public ActionResult PhoneSearch(string sql) { phoneList=從數據庫查詢數據； ViewBag.phoneList = phoneList; return View(); }2.前臺頁面主要代碼
說明：這個就是要展示數據的表格，里面的字段要和你建好的模型匹配。
<table border="1" cellspacing="0" cellpadding="0" class="toLang" id="phoneTable"> <tr> <th>序號</th> <th>公司</th> <th>部門</th> <th>小組</th> <th>姓名</th> <th>職位</th> <th>電話</th> </tr> <tbody id="todeListTBODY"> @if (ViewBag.phoneList != null) { foreach (var item in ViewBag.phoneList) { number = number + 1; <tr> <td>@number</td> <td>@item.Conpany</td> <td>@item.Department</td> <td>@item.Team</td> <td>@item.Name</td> <td>@item.Position</td> <td>@item.PhoneNumber</td> </tr> } } </tbody> </table>3.我的查詢條件
<div style="display:block;float:left; width:100%; "> 公司： <select class="InputTestStyle" id="company" onclick="initDeptSelect()"> <option>==請選擇公司==</option> </select> 部門： <select class="InputTestStyle" id="department" onclick="initGroupSelect()"> <option>==請選擇公司==</option> </select> 小組： <select class="InputTestStyle" id="group" onclick="QueryPhoneNum()"> <option>==請選擇公司==</option> </select> </div>
4.查詢條件的初始化（以公司這個為例）
4.1前臺的JavaScript代碼
//打開頁面的時候執行 window.onunload = initCompanySelect(); //初始化“公司”下拉框 function initCompanySelect() { $.ajax({ type: 'POST', url: '/Home/GetCompantListForPhone', dataType: 'json', data: { }, success: function (data) { //1.清空這個下拉框的數據 // $('#company option').remove();//也能成功實現 $('#company').empty(); $("#company").append($('<option>' + '==請選擇公司==' + '</option>')); //2.將返回值動態加載進下拉框，動態生成標簽。 for (i = 0; i < data.length;i++) { $("#company").append($('<option >' + data[i].Conpany + '</option>')); } }, error: function (XMLHttpRequest, textStatus, errorThown) { alert("操作失??！"); } }) }4.2初始化下拉框對應的ActionResult代碼
/// <summary>/// 獲取電話查詢公司下拉數據/// </summary>/// <returns></returns>[HttpPost]public JsonResult GetCompantListForPhone(){ compantList = 從數據庫獲取這個下拉框數據的集合； return Json(compantList);}其它兩個下拉框按照這個辦法完成后。就可以根據條件查詢了。下面兩個是對用的JavaScript和后臺方法。
5.傳查詢提交到后臺，然后根據返回的集合重新給table賦值。
//根據條件查詢電話 function QueryPhoneNum() { if ($('#group').val() == '==請選擇小組==') { return; } number = 0; $.ajax({ type: 'POST', url: '/Home/PhoneSearchSubmit', dataType: 'json', data: { company:$('#company').val(), dept: $('#department').val(), group: $('#group').val() }, success: function (phoneList) { //1.清空這個表格的數據 $('#todeListTBODY tr').remove(); //2.將返回值動態加載進表格。 $.each(phoneList, function (index, element) { number = number + 1; $('#todeListTBODY').prepend(function (i) { return "<tr>" + "<td>" +number + "<td>" + element.Conpany + "<td>" + element.Department + "<td>" + element.Team + "<td>" + element.Name + "<td>" + element.Position + "<td>" + element.PhoneNumber + "</tr>"; }) }) }, error: function (XMLHttpRequest, textStatus, errorThown) { alert("操作失敗！"); } }) }5.1與查詢數據對應的ActionResult
/// <summary>/// 電話查詢/// </summary>/// <returns></returns>[HttpPost]public JsonResult PhoneSearchSubmit(string company, string dept, string group){ phoneList = 根據條件查詢數據； return Json(phoneList);}Ajax實現動態加載數據的演示就為大家介紹到這里了，錯新技術頻道小編將會為大家整理更多Ajax方面的知識，想要無時無刻都學習到這方面知識，就多多關注錯新技術頻道的動態吧！新聞熱點
疑難解答
圖片精選
