📄 index.jsp
字号:
<%@ page
import="java.util.Iterator,
java.util.List,
com.esolaria.dojoex.Book,
com.esolaria.dojoex.BookManager" %>
<%
List books = BookManager.getBooks();
%>
<html>
<body>
<head>
<title>Dojo and JSON Example</title>
<script language="javascript" src="dojo-0.4.2-ajax/dojo.js"></script>
<script language="javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");
dojo.require("dojo.html.*");
// Event handler when a user hovers a mouse over
function trMouseOver(bookId) {
getBookInfo(bookId);
}
// Event handler when a user hovers a mouse out
function trMouseOut(evt) {
var bookDiv = document.getElementById("bookInfo");
bookDiv.style.display = "none";
}
// Invoked from trMoustOver(bookId) function call above
function getBookInfo(bookId) {
var params = new Array();
params['bookId'] = bookId;
// Perform remote operation using JSON as data format
// that will be returned from the server
var bindArgs = {
url: "actions/book.jsp",
error: function(type, data, evt){alert("error");},
mimetype: "text/json",
content: params
};
var req = dojo.io.bind(bindArgs);
// The "populateDiv" gets called as an event handler
dojo.event.connect(req, "load", this, "populateDiv");
}
// Function call to populate the "bookInfo" div element that is
// defined at the end of this file.
function populateDiv(type, data, evt) {
var bookDiv = document.getElementById("bookInfo");
if (!data) {
bookDiv.style.display = "none";
} else {
bookDiv.innerHTML = "ISBN: " + data.isbn + "<br/>Author: " + data.author;
bookDiv.style.display = "";
}
}
</script>
</head>
<body>
<h1><center>Dojo and JSON Example - Move your mouse over the book titles!</center></h1>
<table cellspacing="0" cellpadding="3" style="background-color:lavender; border: solid 1px #CCCCCC">
<!-- Display each book with Id and it title in a table format -->
<% for (Iterator iter = books.iterator(); iter.hasNext();) {
Book book = (Book) iter.next(); %>
<!-- Whenever you hover your mouse over and out on a book title,
trMouseOver() and trMouseOut event handlers get called -->
<tr onmouseover="trMouseOver(<%=book.getBookId()%>)"
onmouseout="trMouseOut(<%=book.getBookId()%>)">
<td><%=book.getTitle()%></td>
</tr>
<% } %>
</table>
<!-- This is the div element that will be populated in the populateDiv
JavaScript function above, which req object is loaded -->
<div id="bookInfo" style="display:none;"></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -