下面是一个多表头的数据处理
json：
[
{
"name":"xujun",
"sex":"男",
"home":["nanjing","zhengjiang","beijing"]
},
{
"name":"jack",
"sex":"女",
"home":["广州","湖北"]
}
]
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.titleTD
{
border:solid 1px;
}
</style>
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
$('#grid td').addClass('titleTD');
$('#btnData').click(function(){
$.getJSON('jsonData.json?id=1',function(data){
//遍历JSON中的每个entry
$.each(data,function(entryIndex,entry){
var html='<tr>';
html+='<td>'+entry['name']+'</td>';
html+='<td>'+entry['sex']+'</td>';
$.each(entry['home'],function(index,home){
html+='<td>'+home+'</td>';
});
html+='</tr>';
$('#title').after(html);
});
});
});
});
</script>
</head>
<body>
<table id="grid" cellpadding=0 cellspacing=0>
<tr>
<td rowspan="2">姓名</td>
<td rowspan="2">性别</td>
<td colspan="3">地址</td>
</tr>
<tr id="title">
<td>工作地址</td>
<td>家庭地址</td>
<td>学校地址</td>
</tr>
</table>
<button id="btnData">获得数据</button>
</body>
</html>
分享到：
相关推荐
JQuery AJAX 和 JSON 是在 Web 开发中处理异步数据传输和数据格式化的重要工具。本文将深入探讨这两个概念以及它们在实际应用中的使用方法。 首先，JQuery 的 AJAX（Asynchronous JavaScript and XML）功能允许...
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
在IT行业中，jQuery、AJAX、JSON以及Struts2是四个非常重要的技术，它们在Web开发领域中扮演着核心角色。下面将详细解释这些技术及其相互间的集成。 **jQuery** 是一个快速、简洁的JavaScript库，它简化了HTML文档...
在这个“jquery ajax json”的例子中，我们将探讨如何结合这三者实现动态的数据加载。 首先，`display.html`是主页面，它包含HTML结构以及调用jQuery AJAX函数的JavaScript代码。在这个HTML文件中，通常会有一个...
Mvc使用JqueryAjaxJson登陆源码 功能介绍： 在MVC中使用 JqueryAjaxJson登陆，功能比较简单，对初学者很有帮助。 注意： 点击Open Dialog打开登录对话框
jQuery提供了方便的方法来处理JSON数据，包括`$.getJSON()`和`$.ajax()`等函数，可以方便地从服务器获取JSON数据并将其转化为JavaScript对象，或者将JavaScript对象转换为JSON字符串发送到服务器。 **jQuery的get...
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例，实现前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下。
在jQuery的基础上，`jquery.json2xml.js` 和 `jquery.xml2json.js` 这两个脚本提供了方便的方法来在JSON和XML之间进行转换，从而让开发者无需深入了解这两种格式的复杂性，就能轻松地在它们之间进行数据互换。...
在"ajax_struts_jquery_json级联菜单"的场景中，我们将看到如何利用这四种技术协同工作来创建这样的功能。 首先，Struts框架在后台处理业务逻辑。当用户在前端选择了一个父级菜单项后，Struts Action会接收到这个...
2. **请求发送**：jQuery将AJAX请求发送到服务器，数据通常是JSON格式，因为它是轻量且结构化的，利于传输。 3. **服务器端（PHP部分）**：PHP脚本接收到请求，根据请求类型（GET或POST）解析数据。如果是POST请求...
本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**：jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中，jQuery用于...
### jQuery与JSON及AJAX的结合应用 #### 一、引言 随着Web技术的发展，前端框架和库的出现极大地简化了开发流程。其中，jQuery因其简洁易用的特点，在前端开发领域占据了重要的地位。本文将详细介绍如何利用jQuery...
其中，使用jQuery的Ajax功能来读取JSON文件内容是前端开发中的常见需求，尤其在动态加载数据、实现异步交互方面发挥着重要作用。 ### 标题解析：“jQuery ajax读取json文件内容” 此标题直截了当，明确指出将通过...
2. **解析与渲染**：jQuery的`$.parseJSON()`（现在已弃用，推荐使用`$.getJSON()`或`$.ajax()`的dataType设置为'json'）方法用于解析JSON字符串为JavaScript对象，然后可以在前端动态更新DOM。 **Ajax级联操作** ...
关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...
**Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...
【Demo流程】在这个"jquery ajax servlet json简单demo"中，我们可以预期以下流程： 1. 客户端（浏览器）的JavaScript代码使用jQuery的AJAX函数发起请求，请求可能包含一些参数，格式化为JSON。 2. 请求被发送到...
在本文中，我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组，特别是在实现菜单联动下拉框的场景中。SSH1（Spring、Struts、Hibernate）是Java开发中的一个流行MVC框架组合，而jQuery的AJAX功能则...
本文将深入探讨如何使用jQuery的AJAX方法发送JSON对象数组到Struts2的Action，并在后端进行处理。 首先，我们了解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于...