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); }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是Ajax实现动态加载数据的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DDREASE是一种用于从文件或块设备(如硬盘、SSD、RAM磁盘、CD、DVD和USB存储设备)恢复数据的工具。它将数据从一个块设备复制到另一个块设备,留下损坏的数据块,只移动好的数据块。ddreasue是一种强大的恢复工具,完全自动化,因为它在恢复操作期间不需要任何干扰。此外,由于有了ddasue地图文件,它可以随时停止和恢复。DDREASE的其他主要功能如下:它不会覆盖恢复的数据,但会在迭代恢复的情况下填补空白。但是,如果指示工具显式执行此操作,则可以将其截断。将数据从多个文件或块恢复到单

0.这篇文章干了啥?提出了DepthFM:一个多功能且快速的最先进的生成式单目深度估计模型。除了传统的深度估计任务外,DepthFM还展示了在深度修复等下游任务中的最先进能力。DepthFM效率高,可以在少数推理步骤内合成深度图。下面一起来阅读一下这项工作~1.论文信息标题:DepthFM:FastMonocularDepthEstimationwithFlowMatching作者:MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow,7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中,Pytorch依然比Tensorflow更受欢迎。但未来,也许有更多的大模型会基于JAX平台进行训练和运行。模型最近,Keras团队为三个后端(TensorFlow、JAX、PyTorch)与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先,他们为生成式和非生成式人工智能任务选择了一组主流

哭死啊,全球狂炼大模型,一互联网的数据不够用,根本不够用。训练模型搞得跟《饥饿游戏》似的,全球AI研究者,都在苦恼怎么才能喂饱这群数据大胃王。尤其在多模态任务中,这一问题尤为突出。一筹莫展之际,来自人大系的初创团队,用自家的新模型,率先在国内把“模型生成数据自己喂自己”变成了现实。而且还是理解侧和生成侧双管齐下,两侧都能生成高质量、多模态的新数据,对模型本身进行数据反哺。模型是啥?中关村论坛上刚刚露面的多模态大模型Awaker1.0。团队是谁?智子引擎。由人大高瓴人工智能学院博士生高一钊创立,高

在iPhone上面临滞后,缓慢的移动数据连接?通常,手机上蜂窝互联网的强度取决于几个因素,例如区域、蜂窝网络类型、漫游类型等。您可以采取一些措施来获得更快、更可靠的蜂窝互联网连接。修复1–强制重启iPhone有时,强制重启设备只会重置许多内容,包括蜂窝网络连接。步骤1–只需按一次音量调高键并松开即可。接下来,按降低音量键并再次释放它。步骤2–该过程的下一部分是按住右侧的按钮。让iPhone完成重启。启用蜂窝数据并检查网络速度。再次检查修复2–更改数据模式虽然5G提供了更好的网络速度,但在信号较弱

最近,军事圈被这个消息刷屏了:美军的战斗机,已经能由AI完成全自动空战了。是的,就在最近,美军的AI战斗机首次公开,揭开了神秘面纱。这架战斗机的全名是可变稳定性飞行模拟器测试飞机(VISTA),由美空军部长亲自搭乘,模拟了一对一的空战。5月2日,美国空军部长FrankKendall在Edwards空军基地驾驶X-62AVISTA升空注意,在一小时的飞行中,所有飞行动作都由AI自主完成!Kendall表示——在过去的几十年中,我们一直在思考自主空对空作战的无限潜力,但它始终显得遥不可及。然而如今,

这周,由OpenAI、微软、贝佐斯和英伟达投资的机器人公司FigureAI宣布获得接近7亿美元的融资,计划在未来一年内研发出可独立行走的人形机器人。而特斯拉的擎天柱也屡屡传出好消息。没人怀疑,今年会是人形机器人爆发的一年。一家位于加拿大的机器人公司SanctuaryAI最近发布了一款全新的人形机器人Phoenix。官方号称它能以和人类一样的速率自主完成很多工作。世界上第一台能以人类速度自主完成任务的机器人Pheonix可以轻轻地抓取、移动并优雅地将每个对象放置在它的左右两侧。它能够自主识别物体的

特斯拉机器人Optimus最新视频出炉,已经可以在厂子里打工了。正常速度下,它分拣电池(特斯拉的4680电池)是这样的:官方还放出了20倍速下的样子——在小小的“工位”上,拣啊拣啊拣:这次放出的视频亮点之一在于Optimus在厂子里完成这项工作,是完全自主的,全程没有人为的干预。并且在Optimus的视角之下,它还可以把放歪了的电池重新捡起来放置,主打一个自动纠错:对于Optimus的手,英伟达科学家JimFan给出了高度的评价:Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉
