微客导航 » 文章资讯 » Ajax实现动态加载数据

Ajax实现动态加载数据

2024-02-23 21:43:05 451

前言：

1.这个随笔实现了一个Ajax动态加载的例子。

2.使用.net的MVC框架实现。

3.这个例子重点在前后台交互，其它略写。

开始：

1.控制器ActionResult代码（用于显示页面）

///
///电话查询页面
///
///
publicActionResultPhoneSearch(stringsql)
{
phoneList=从数据库查询数据；
ViewBag.phoneList=phoneList;
returnView();
}

2.前台页面主要代码

说明：这个就是要展示数据的表格，里面的字段要和你建好的模型匹配。



序号
公司
部门
小组
姓名
职位
电话


@if(ViewBag.phoneList!=null)
{
foreach(variteminViewBag.phoneList)
{
number=number+1;

@number
@item.Conpany
@item.Department
@item.Team
@item.Name
@item.Position
@item.PhoneNumber

}
}

3.我的查询条件


公司：



部门：



小组：

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

4.1前台的JavaScript代码

//打开页面的时候执行
window.onunload=initCompanySelect();
//初始化“公司”下拉框
functioninitCompanySelect()
{
$.ajax({
type:'POST',
url:'/Home/GetCompantListForPhone',
dataType:'json',
data:{},
success:function(data){
//1.清空这个下拉框的数据
//$('#companyoption').remove();//也能成功实现
$('#company').empty();
$("#company").append($(''));
//2.将返回值动态加载进下拉框，动态生成标签。
for(i=0;i'+data[i].Conpany+''));
}
},
error:function(XMLHttpRequest,textStatus,errorThown){
alert("操作失败！");
}
})
}

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

///
///获取电话查询公司下拉数据
///
///
[HttpPost]
publicJsonResultGetCompantListForPhone()
{

compantList=从数据库获取这个下拉框数据的集合；
returnJson(compantList);
}

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

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

//根据条件查询电话
functionQueryPhoneNum()
{
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.清空这个表格的数据
$('#todeListTBODYtr').remove();

//2.将返回值动态加载进表格。
$.each(phoneList,function(index,element){
number=number+1;
$('#todeListTBODY').prepend(function(i){
return""+
""+number+
""+element.Conpany+
""+element.Department+
""+element.Team+
""+element.Name+
""+element.Position+
""+element.PhoneNumber+
"";
})
})
},
error:function(XMLHttpRequest,textStatus,errorThown){
alert("操作失败！");
}
})
}

5.1与查询数据对应的ActionResult

///
///电话查询
///
///
[HttpPost]
publicJsonResultPhoneSearchSubmit(stringcompany,stringdept,stringgroup)
{
phoneList=根据条件查询数据；
returnJson(phoneList);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Ajax实现动态加载数据

热门推荐

随机推荐