Ajax异步获取JSON数据动态生成表格
本文主要介绍了如何利用AJAX技术实现异步数据请求并在前端动态拼接表格来展示数据的过程。AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页的技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。 首先,我们看到HTML部分,有一个"ѯİť"按钮,当用户点击该按钮时,会触发名为`shows()`的JavaScript函数。这个函数的第一个任务是获取输入框中serviceNo的值,这将作为AJAX请求的参数。 在AJAX对象中,设置以下关键属性: - `url`:指定要发送请求的服务器地址,这里使用了Spring MVC的`<c:url>`标签来构建URL。 - `data`:包含异步传递的参数,这里是通过`${p}`表达式将服务号插入到请求体中。 - `type`:设置请求类型为"post",意味着向服务器发送的是POST方法的数据。 当AJAX请求成功返回数据时,如果数据不为空且非空字符串,代码会进入一个循环,根据服务器返回的JSON数据逐条生成表格行。这段代码展示了如何使用for循环遍历数据数组,并在每个迭代中插入单元格内容,包括日期、服务名称、序列号、员工姓名、报告员和金额等字段。HTML片段中的`InfoWindow`可能是弹出窗口或者详细信息显示的函数,用于在点击某一行时显示更详细的信息。 最后,使用`$("#Shows").html(html)`将拼接好的HTML内容替换到id为"Shows"的表格中,实现了数据的动态展示。如果服务器返回的数据为空,函数会显示一个警告信息并终止。 总结来说,这篇文章的核心知识点在于利用AJAX的异步特性,结合JavaScript处理表头和数据的动态渲染,以提供更好的用户体验。这种技术在前端开发中常用于实现单页应用(SPA)中的数据交互,使得用户界面能够实时响应数据变化而无需刷新整个页面。
--<!-- 查询点击的按钮 -->
<div class="export">
<button class="" onclick="shows()">查询</button>
</div>
<!-- 显示表 -->
<table id="Shows" class="con_table"> </table>
<!-- js方法->
function shows(){
var p=$("input[id='serviceNo']").val();//获取id值
jQuery.ajax({
url: "<c:url value='/类/方法'/>",//路径
data:{名字:p},//参数
type: "post",//方法
success: function(data){
if (data != null && data != "") {
var html = "<tr><th ><b>三顿饭都是</b></th><th><b>名称</b></th><th><b>服</b></th><th><b>姓</b></th><th><b>手机号</b></th><th><b>金额(元)</b></th></tr>";//拼接表头
for (var i = 0; i < data.length; i++) {//循环数据
html += "<tr style=\'cursor:pointer;\' onclick=\"InfoWindow(\'" + data[i].date + "\',\'" + data[i].servi + "\',\'" + data[i].se + "\',\'" + data[i].ername + "\',\'" + data[i].reporter + "\',\'" + data[i].money + "\');\">";
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 23
- 资源: 84
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展