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>

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);
        }