怎么用Ajax实现动态加载数据的功能

来源：动视网责编：小采时间：2020-11-27 19:57:10

怎么用Ajax实现动态加载数据的功能

怎么用Ajax实现动态加载数据的功能:这次给大家带来怎么用Ajax实现动态加载数据的功能，Ajax实现动态加载数据功能的注意事项有哪些，下面就是实战案例，一起来看一下。前言：1.这个随笔实现了一个Ajax动态加载的例子。2.使用.net 的MVC框架实现。3.这个例子重点在前后台交互，其它略写。开始：1

推荐度：

点击下载本文 文档为doc格式

导读怎么用Ajax实现动态加载数据的功能:这次给大家带来怎么用Ajax实现动态加载数据的功能，Ajax实现动态加载数据功能的注意事项有哪些，下面就是实战案例，一起来看一下。前言：1.这个随笔实现了一个Ajax动态加载的例子。2.使用.net 的MVC框架实现。3.这个例子重点在前后台交互，其它略写。开始：1

这次给大家带来怎么用Ajax实现动态加载数据的功能，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代码

 //打开页面的时候执行
 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);
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

怎么用Ajax实现动态加载数据的功能

推荐度：

点击下载本文 文档为doc格式

标签：数据实现 ajax

热门焦点

怎么用Ajax实现动态加载数据的功能

怎么用Ajax实现动态加载数据的功能

怎么用Ajax实现动态加载数据的功能

最新推荐

猜你喜欢

热门推荐