一 应用
该实例允许用户打开一个页面来选择图书，当用户选择了合适的图书之后，再把用户选择的图书传回主页面。该应用是用JSON消息发送的。
二 代码
1、viewBook.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 选择图书 </title>
<script type="text/javascript">
var chooseBook = function()
{
// 打开一个新窗口
var targetWin = window.open('http://localhost/test1/1/target/chooseBook.html'
,'_blank','width=510,height=300');
// 等该窗口装载完成时，向该窗口发送消息
targetWin.onload = function ()
{
var data = [
{
name : '疯狂Java讲义',
price : 109,
author : 'yeeku'
},
{
name : '疯狂Android讲义',
price : 89,
author : 'yeeku'
},
{
name : '轻量级Java EE企业应用实战',
price : 99,
author : 'yeeku'
}
];
// 向http://localhost:8888/target发送消息
targetWin.postMessage(data
, "http://localhost/test1/1/target"); //①
}
}
// 通过onmessage监听器监听其他窗口发送回来的消息
window.onmessage = function(ev)
{
// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）
if (ev.origin != "http://localhost")
{
return;
}
var show = document.getElementById("result");
// 显示消息
show.innerHTML = ("您选择的图书为：<br/>"
+ "书名：" + ev.data.name + "<br/>"
+ "价格：" + ev.data.price + "<br/>"
+ "作者：" + ev.data.author + "<br/>");
};
</script>
</head>
<body>
<a href="#" onclick="chooseBook();">选择图书</a>
<div id="result"></div>
</body>
</html>
2、chooseBook.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 选择图书 </title>
<style type="text/css">
body>table {
width:480px;
border-collapse: collapse;
}
td,th {
border: 1px solid black;
}
</style>
<script type="text/javascript">
var srcWin , srcOrigin;
var chooseItem = function(td)
{
var currentRow = td.parentNode.parentNode;
srcWin.postMessage(
{
name: currentRow.cells[0].innerHTML ,
author: currentRow.cells[1].innerHTML ,
price: currentRow.cells[2].innerHTML
} , srcOrigin);
window.close();
};
window.onmessage = function(ev)
{
// 忽略来自其他域名的跨文档消息（只接受http://localhost的消息）
if (ev.origin != "http://localhost")
{
return;
}
srcWin = ev.source;
srcOrigin = ev.origin;
// 接收到其他文档发送过来的消息
var books = ev.data;
var bookTb = document.getElementById("bookTb");
for(var i = 0 ; i < books.length ; i++)
{
var row = bookTb.insertRow(i);
row.insertCell(0).innerHTML = books[i].name;
row.insertCell(1).innerHTML = books[i].price;
row.insertCell(2).innerHTML = books[i].author;
row.insertCell(3).innerHTML = "<input name='choose' type='radio'"
+ " onclick='chooseItem(this);'/>";
}
};
</script>
</head>
<body>
<table>
<tr>
<th>图书名</th>
<th>价格</th>
<th>作者</th>
<th>选择</th>
</tr>
<tbody id="bookTb"></tbody>
</table>
</body>
</html>
三 运行结果
相关推荐
“JSON基础教程.CHM”和“JSON基础教程.pdf”分别提供了Windows帮助文件和PDF文档格式的教程，方便用户在不同设备和环境下学习。CHM文件适合在Windows系统下查看，包含了丰富的内链和索引，而PDF文件则适合离线阅读...
Opis JSON Schema是标准（草案2020-12，draft-2019-09，draft-07和draft-06）PHP实现，它将帮助您验证各种JSON文档，无论它们是配置文件或一组发送到RESTful API端点的数据。 图书馆的主要特点： 支持所有草稿中的...
8. **学习资源**：为了更好地理解和使用SSM框架，开发者可以参考官方文档，参加在线课程，阅读相关书籍，参与社区讨论，实践项目开发，从而逐步提升自己的技能。 在实际开发中，这个压缩包提供的SSM框架整合包将极...
这篇毕设文档主要探讨了如何在Android平台上开发一个图书管理系统，涵盖了Android应用开发的基础知识、Java编程语言的应用以及Apache的相关技术。以下是对这些知识点的详细解释： 1. Android平台：Android是由...
用户完成购物车中书籍的选择后，可以通过订单确认功能进行结账。 #### 2.8 订单查询 用户可以查询自己历史订单的详细信息。 #### 2.9 下沉式菜单栏 客户端设计应包括一个下沉式菜单栏，方便用户快速跳转到不同的...
【项目文档规范（商城）】主要涉及的是一个在线图书商城的开发规范，涵盖了从环境搭建、功能分析到具体模块的实现细节。以下是基于标题和描述的知识点详细说明： 1. **环境搭建**： - 在图书商城的环境中，首先...
样式表中引入这个文件，从而让所有页面都使用到这些样式。这有助于保持小程序整体的视觉一致性。例如： ```css ...在实际开发过程中，还需要不断学习和熟悉微信小程序的文档，以应对各种复杂需求。
本项目重点是利用豆瓣API来获取书籍的详细信息，通过输入ISBN（国际标准书号）来实现这一功能，而开发语言选择的是C#。 C#是一种面向对象的编程语言，由微软公司开发，广泛应用于Windows平台的应用开发，尤其是.NET...
通过使用XML作为消息格式，SOAP确保了数据的可读性和可扩展性，从而促进了跨语言和跨平台的互操作性。尽管随着技术的发展，其他协议和技术逐渐兴起，SOAP仍然是理解和构建分布式系统的重要组成部分。
在这个项目中，Ajax用于实现页面的异步更新，如实时查看书籍详情、搜索结果的动态加载，以及用户交互反馈等，提高了用户体验。 4. 前后端交互：项目的前端主要负责用户界面的展示，通过发送Ajax请求与后端PHP进行...
- **购买和评论**：V9.3新增了用户购买书籍和评论书籍的协议，实现了电子书的在线购买和用户反馈功能。 - **设备类型标识**：V9.4定义了deviceType参数，区分Android、iPhone和iPad等不同设备。 - **搜索功能**：...
标题中的“1433物联网STM32单片机基于RFID的图书档案管理系统送文档-毕业源码案例设计”表明这是一个使用STM32单片机实现的物联网应用，主要功能是通过RFID（Radio Frequency Identification）技术进行图书或档案...
【基于Web的图书管理系统】是一种在线的图书管理解决方案，它利用Web技术实现图书的借阅、归还、查询以及各种管理功能。这种系统通常由前端用户界面和后端数据库两大部分构成，为用户提供便捷的图书资源管理和访问...
该资源是一个包含基于SpringBoot和微信小程序开发的图书馆座位预约系统的完整源码和数据库文档的压缩包。这个项目集成了多种技术，适用于毕业设计、学习案例或者实际的图书馆信息化管理场景。下面将详细阐述其中涉及...
- **SQLite数据库**：系统内部很可能使用SQLite作为本地数据库存储图书信息，包括书籍ID、书名、作者、出版社等数据。 - **布局设计**：XML布局文件用于定义用户界面，包括ListView、RecyclerView等组件用于展示...
- **更新书籍**：使用PUT请求更新书籍信息，同样发送到`/books/{bookId}`，Content-Type为`application/json`，请求体包含要更新的字段。 - **删除书籍**：DELETE请求到`/books/{bookId}`，删除指定ID的书籍。 5....
1. **图书添加**：在用户填写完图书信息并提交时，前端可以使用`$.ajax()`函数（jQuery库中的实现）或者原生JavaScript的`XMLHttpRequest`对象发起一个POST请求，将图书数据发送到后台服务器。服务器验证数据无误后...
除了上述知识点外，书籍《ajax学习文档》还特别强调了案例学习的重要性，通过案例将知识点串联起来，以便读者能够更好地理解和应用Ajax技术。案例教学法可以帮助读者更加直观地感受到Ajax技术在实际Web开发中的应用...
6. **存储数据**：将结果保存到本地，可以选择文本文件、CSV、JSON，甚至数据库。如果需要长期跟踪，数据库如SQLite、MySQL等是不错的选择。 7. **周期性运行**：为了获取最新的图书上架信息，可以将爬虫脚本设置为...
为了实现业务逻辑，MFC允许开发者自定义消息处理函数，这些函数会在特定消息被发送时被调用。例如，当用户点击“添加书籍”按钮时，系统会触发一个消息，对应的处理函数则负责收集用户输入的信息，并将其保存到...