jquery通过json从数据库中返回一条数据和其对应的多条数据
2009年03月03日 星期二 下午 11:05
最近在用jquery框架做项目,整个项目全部采用AJAX技术,用JSON做数据交换,下面的例子是一对多的关系,从数据库中查出一条主数据,然后显示这条主数据对应的多条其它数据,如下所示:
json.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
{
"name":"卖咖啡",
"sex":"男",
"age":"26",
"award":
[
{
"awardDate" : "2001-01-15",
"awardName" : "国际舞蹈大赛金奖",
"awardAgent" : "国际舞联"
},
{
"awardDate" : "2003-07-23",
"awardName" : "中国舞蹈大赛金奖",
"awardAgent" : "中国舞联"
},
{
"awardDate" : "2008-09-28",
"awardName" : "欧洲舞蹈大赛金奖",
"awardAgent" : "欧洲舞联"
}
]
}
jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title></title>
<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url="<%=path%>/json/json.jsp";
$("#button").click(function(){
$.getJSON(
url,
function(data){
$("#detail").empty();
$("#list").empty();
var detailHtml='';
detailHtml += '<table width="400" border="1">';
detailHtml += ' <tr>';
detailHtml += ' <td>姓名</td>';
detailHtml += ' <td>性别</td>';
detailHtml += ' <td>年龄</td>';
detailHtml += ' </tr>';
detailHtml += ' <tr>';
detailHtml += ' <td>'+data.name+'</td>';
detailHtml += ' <td>'+data.sex+'</td>';
detailHtml += ' <td>'+data.age+'</td>';
detailHtml += ' </tr>';
detailHtml += '</table></br>';
$('#detail').append(detailHtml);
var listHtml='';
listHtml += '<table width="400" border="1">';
listHtml += ' <tr>';
listHtml += ' <td>获奖时间</td>';
listHtml += ' <td>获奖名称</td>';
listHtml += ' <td>获奖机构</td>';
listHtml += ' </tr>';
$.each(data.award,function(entryIndex,entry){
listHtml += ' <tr>';
listHtml += ' <td>'+entry['awardDate']+'</td>';
listHtml += ' <td>'+entry['awardName']+'</td>';
listHtml += ' <td>'+entry['awardAgent']+'</td>';
listHtml += ' </tr>';
});
listHtml += '</table>';
$('#list').append(listHtml);
});
});
});
</script>
</head>
<body>
<button id="button">读取</button>
<div id="detail"></div>
<div id="list"></div>
</body>
</html>
实现效果:
|
分享到：
相关推荐
例如，你可能需要解析请求的查询参数，如`page`和`limit`，然后从数据库中查询对应的数据。 最后，你需要在`loadingComplete`回调中处理加载到的数据，将其插入到页面的适当位置。你可以使用jQuery的DOM操作方法，...
在Web开发中，局部刷新和分页是提高用户体验的关键技术，尤其是在处理大量数据时。本教程将探讨如何使用jQuery的AJAX功能实现页面局部刷新，同时结合MySQL数据库和Struts2框架实现高效的分页功能。 首先，jQuery ...
当用户点击分页按钮时，jQueryGrid会发送一个包含当前页数和每页显示条数的请求到服务器，服务器根据这些参数返回对应的数据，然后jQueryGrid将新数据动态插入到表格中，实现页面内容的局部更新。 三、实现步骤 1. ...
3. 在result.php文件中，根据传入的页码参数从数据库中查询对应的数据集，通常也是以15条数据为一个分页单位。将查询结果编码为JSON格式响应。 4. 在客户端，jQuery监听到$.getJSON的响应后，判断返回的数据是否...
在翻页时，根据用户的选择（上一条或下一条）发送不同的请求参数，获取对应的数据。 3. **DOM操作**：在获取新数据后，JavaScript需要对页面的DOM（Document Object Model）进行操作，将新的新闻内容插入到相应的...
**jQuery分页插件**是Web开发中常用的一种工具，用于在大量数据中实现高效的页面导航，提升用户体验。本资源包含一个演示说明，使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...
在这个系统中，员工数据可能被存储在MySQL的表中，每个员工对应一条记录，包含如姓名、部门、性别、年龄等字段。开发者会使用SQL语句来插入、查询、更新或删除这些数据。Ajax请求通常会与后端PHP、Node.js或其他...
这个例子中的数据源包含多个对象，每个对象都有`id`、`name`、`state`和`tel`属性。`state`属性用于指示复选框是否应该被选中。 总结一下，实现BootStrap Table复选框默认选中功能的关键步骤如下： 1. 引入...
1. **分页样式和用户体验**：为了提升用户体验，可以添加视觉反馈，如加载指示器，在等待数据返回时显示。 2. **缓存策略**：对分页数据进行缓存，可以减少服务器压力，提高响应速度。 3. **安全性**：确保Ajax请求...
jQuery处理完返回的JSON数据后，会通过回调函数中的代码遍历这些数据，并生成对应的HTML结构。最后，将这些结构动态地添加到最初页面上创建的空容器中，从而实现了无刷新地动态加载数据。 页面上显示数据的样式由...
在本项目中，SpringMVC将作为后端处理逻辑的核心，负责与数据库交互，提供JSON数据供前端使用。 bootstrap-table是一款基于Bootstrap的表格插件，它可以方便地实现数据的展示、排序、筛选等功能。在本案例中，我们...
在服务器端，我们需要根据接收到的`page`参数，查询数据库获取对应页的数据，并以JSON或其他格式返回给前端。 例如，在PHP中： ```php $page = $_GET['page']; $itemsPerPage = 10; // 每页显示10条记录 $start =...
这种技术通常与Ajax（Asynchronous JavaScript and XML）结合使用，尽管在实际应用中XML已不再常见，更多的是JSON（JavaScript Object Notation）数据格式。 分页的核心在于利用jQuery的Ajax功能，通过发送异步请求...
在网页开发中，分页是一种常见的用户界面设计，用于...前端通过AJAX与后端通信，后端处理请求并从数据库获取数据，然后将数据返回给前端，前端再更新页面内容。这个过程提升了用户体验，使得浏览大数据集变得更加流畅。
前端负责展示分页界面和处理用户的翻页请求，而后端则需要根据前端传来的页码和每页大小等参数，从数据库中查询对应的数据。 在前端，HTML和CSS可以构建分页的布局，而JavaScript或jQuery常用来实现动态效果，如...
删：用户选择一条记录进行删除时，PHP脚本会根据传入的主键值（通常是ID）删除对应的数据行，并返回操作状态。 改：在jqGrid中编辑某条记录，用户提交更改后，PHP脚本会接收到修改后的数据，更新数据库中的记录。 ...
这些数据包括对应的日期和具体数值，可能存储在一个包含多条记录的列表或数组中。 3. **数据处理**：后端将查询结果转换为JSON格式，这是Ajax能够理解并传递回前端的格式。JSON数据结构应包括X轴（日期）和Y轴...
1. **RESTful API**：虽然描述中提到不包括数据库和RESTeasy处理方法，但在实际开发中，后台通常需要提供RESTful接口，接收前端发送的请求参数，如当前页数、页面大小等，然后从数据库中查询对应的数据并返回。...
映射文件中包含了多个、、、等元素，每个元素对应一条SQL语句。通过合理的映射文件配置，可以实现数据库操作与业务逻辑的解耦。 ### 24. Tomcat的Session超时时间设置 Tomcat是一个开源的Servlet容器，支持Java EE...
jQuery 分页是网页开发中常用的一种技术，用于在大量数据中实现内容的分块加载，提高用户体验并优化页面性能。jQuery 是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在...