Ajax实现动态加载数据的演示

网址简介:未填写

更新时间:11个月前

访问次数:105

详细介绍

数据的动态加载可以使用户非常愉快,因此在许多情况下,数据的可视化总是有一些动态加载,本文是爱站技术频道小编为大家带来的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方面的知识,想要无时无刻都学习到这方面知识,就多多关注爱站技术频道的动态吧!  

请发表您的评论