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.我的查询条件

 <p 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>
 </p>

4.查询条件的初始化（以公司这个为例）

4.1前台的JavaScript代码

4.2初始化下拉框对应的ActionResult代码

/// <summary>
/// 获取电话查询公司下拉数据
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetCompantListForPhone()
{
 
 compantList = 从数据库获取这个下拉框数据的集合；
 return Json(compantList);
}

其它两个下拉框按照这个办法完成后。就可以根据条件查询了。下面两个是对用的JavaScript和后台方法。

5.传查询提交到后台，然后根据返回的集合重新给table赋值。

5.1与查询数据对应的ActionResult

/// <summary>
/// 电话查询
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult PhoneSearchSubmit(string company, string dept, string group)
{
 phoneList = 根据条件查询数据；
 return Json(phoneList);
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

HTTP报文及ajax基础知识

Ajax异步请求技术实例讲解

Ajax跨域请求的原理（图文教程）