Ajax動態載入資料

標籤：失敗   初始化   .ajax   ror   append   splay   item   close   code   

前言：

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>

View Code

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動態載入資料