基于数据库去完成用json方式进行的工具提示
2017-08-24 16:30
716 查看
一、tool.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!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>基于json方式实现工具提示</title>
</head>
<script language="javascript">
//定义一个变量，用于存放XMLHttpRequest对象
var xmlHttp;
//记录事件发生时的鼠标位置
var x,y;
//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
//这是通过ajax取得提示消息的办法
function over(index){
//记录事件发生时的鼠标位置
x=event.clientX;
y=event.clientY;
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange=showInfo;
//open方法建立对服务器的调用
xmlHttp.open("get","ToolByJsonServlet?index="+index);
//发送请求
xmlHttp.send(null);
}
function showInfo(){
var result;
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//取出服务器返回的json字符串转成json对象
result=eval("("+xmlHttp.responseText+")");
document.getElementById("tip").style.display = "block";
document.getElementById("tip").style.top = y;
document.getElementById("tip").style.left = x + 100;
document.getElementById("tipTable").rows[0].cells[0].innerHTML="图书名称："+result.bookName;
document.getElementById("tipTable").rows[1].cells[0].innerHTML="书号："+result.bookid;
document.getElementById("tipTable").rows[2].cells[0].innerHTML="出版社："+result.publisher;
document.getElementById("tipTable").rows[3].cells[0].innerHTML="价格："+result.price;
document.getElementById("tipTable").rows[4].cells[0].innerHTML="库存量："+result.count;
document.getElementById("tipTable").rows[5].cells[0].innerHTML="简介："+result.description;
}
}
}
function out(){
document.all.tip.style.display="none";
}
</script>
<body>
<%
try
{//创建连接对象con,它属于Connection类,然后用类DriverManager调用getConnection().
String url="jdbc:mysql://localhost/login?characterEncoding=utf-8";
Connection con=DriverManager.getConnection(url,"root","");
ResultSet rs=null;
Statement stmt=null;
String sql=null;
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
sql="select * from book_info";
stmt=con.createStatement();
rs=stmt.executeQuery(sql);
%>
<table border="0" width="80%" align="center">
<tr style="height:1px">
<td align="left">图书列表 </td>
</tr>
</table>
<div style="height:80px;">
<table border="1" align="center" cellspacing="0" style="width:90%">
<thead>
<tr>
<th width="5%">
<span style="font-weight:400">图书编号</span></th>
<th width="28%">
<span style="font-weight:400">书名</span></th>
<th width="25%">
<span style="font-weight:400">出版社</span></th>
<th width="15%">
<span style="font-weight:400">价格</span></th>
</tr>
</thead>
<%
while(rs.next())
{
%>
<tr>
<td align="center"><a href="#" onmouseover="over(<%=rs.getInt("book_id")%>)" onmouseout="out()"><%=rs.getInt("book_id")%></a></td>
<td align="center"><%=rs.getString("book_name")%></td>
<td align="center"><%=rs.getString("book_publish")%></td>
<td align="center"><%=rs.getFloat("book_price") %></td>
</tr>
<%
}
%>
</table>
</div>
<%
}catch(SQLException ex){
System.out.println(ex.getMessage());
}
%>
<div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;height:150px;width:200px;">
<table id="tipTable" bgcolor="blue">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>二、TOOlByJsonServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.bookDao;
import javabean.book;
@WebServlet("/ToolByJsonServlet")
public class ToolByJsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ToolByJsonServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String bookid=request.getParameter("index").trim();
int bookid1=Integer.parseInt(bookid);
PrintWriter out=response.getWriter();
bookDao bookdao=new bookDao();
String bookJson="";
try{
book bookinfo=bookdao.getBookById(bookid1);
if(bookinfo!=null){
bookJson="{bookName:'"+bookinfo.getBookname()+"',"
+"bookid:'"+bookinfo.getBookid()+"',"
+ "publisher:'"
+ bookinfo.getBookpublisher()+"',"
+"price:'"+bookinfo.getBookprice()+"',"
+"count:'"+bookinfo.getCount()+"',"
+"description:'"+bookinfo.getBookcontent()+"'"
+"}";
}
}catch(Exception ex){
System.out.println(ex.getMessage());
}finally{
}
out.println(bookJson);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
三、完成web.xml
配置sevlet以及servlet-mapping
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!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>基于json方式实现工具提示</title>
</head>
<script language="javascript">
//定义一个变量，用于存放XMLHttpRequest对象
var xmlHttp;
//记录事件发生时的鼠标位置
var x,y;
//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
//这是通过ajax取得提示消息的办法
function over(index){
//记录事件发生时的鼠标位置
x=event.clientX;
y=event.clientY;
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange=showInfo;
//open方法建立对服务器的调用
xmlHttp.open("get","ToolByJsonServlet?index="+index);
//发送请求
xmlHttp.send(null);
}
function showInfo(){
var result;
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//取出服务器返回的json字符串转成json对象
result=eval("("+xmlHttp.responseText+")");
document.getElementById("tip").style.display = "block";
document.getElementById("tip").style.top = y;
document.getElementById("tip").style.left = x + 100;
document.getElementById("tipTable").rows[0].cells[0].innerHTML="图书名称："+result.bookName;
document.getElementById("tipTable").rows[1].cells[0].innerHTML="书号："+result.bookid;
document.getElementById("tipTable").rows[2].cells[0].innerHTML="出版社："+result.publisher;
document.getElementById("tipTable").rows[3].cells[0].innerHTML="价格："+result.price;
document.getElementById("tipTable").rows[4].cells[0].innerHTML="库存量："+result.count;
document.getElementById("tipTable").rows[5].cells[0].innerHTML="简介："+result.description;
}
}
}
function out(){
document.all.tip.style.display="none";
}
</script>
<body>
<%
try
{//创建连接对象con,它属于Connection类,然后用类DriverManager调用getConnection().
String url="jdbc:mysql://localhost/login?characterEncoding=utf-8";
Connection con=DriverManager.getConnection(url,"root","");
ResultSet rs=null;
Statement stmt=null;
String sql=null;
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
sql="select * from book_info";
stmt=con.createStatement();
rs=stmt.executeQuery(sql);
%>
<table border="0" width="80%" align="center">
<tr style="height:1px">
<td align="left">图书列表 </td>
</tr>
</table>
<div style="height:80px;">
<table border="1" align="center" cellspacing="0" style="width:90%">
<thead>
<tr>
<th width="5%">
<span style="font-weight:400">图书编号</span></th>
<th width="28%">
<span style="font-weight:400">书名</span></th>
<th width="25%">
<span style="font-weight:400">出版社</span></th>
<th width="15%">
<span style="font-weight:400">价格</span></th>
</tr>
</thead>
<%
while(rs.next())
{
%>
<tr>
<td align="center"><a href="#" onmouseover="over(<%=rs.getInt("book_id")%>)" onmouseout="out()"><%=rs.getInt("book_id")%></a></td>
<td align="center"><%=rs.getString("book_name")%></td>
<td align="center"><%=rs.getString("book_publish")%></td>
<td align="center"><%=rs.getFloat("book_price") %></td>
</tr>
<%
}
%>
</table>
</div>
<%
}catch(SQLException ex){
System.out.println(ex.getMessage());
}
%>
<div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;height:150px;width:200px;">
<table id="tipTable" bgcolor="blue">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>二、TOOlByJsonServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.bookDao;
import javabean.book;
@WebServlet("/ToolByJsonServlet")
public class ToolByJsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ToolByJsonServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String bookid=request.getParameter("index").trim();
int bookid1=Integer.parseInt(bookid);
PrintWriter out=response.getWriter();
bookDao bookdao=new bookDao();
String bookJson="";
try{
book bookinfo=bookdao.getBookById(bookid1);
if(bookinfo!=null){
bookJson="{bookName:'"+bookinfo.getBookname()+"',"
+"bookid:'"+bookinfo.getBookid()+"',"
+ "publisher:'"
+ bookinfo.getBookpublisher()+"',"
+"price:'"+bookinfo.getBookprice()+"',"
+"count:'"+bookinfo.getCount()+"',"
+"description:'"+bookinfo.getBookcontent()+"'"
+"}";
}
}catch(Exception ex){
System.out.println(ex.getMessage());
}finally{
}
out.println(bookJson);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
三、完成web.xml
配置sevlet以及servlet-mapping
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用json方式完成工具提示功能
- 二、spring Boot构建的Web应用中，基于MySQL数据库的几种数据库连接方式进行介绍
- Struts2基于XML配置方式实现对action的所有方法进行输入校验
- Android学习之Http使用Post方式进行数据提交(普通数据和Json数据)
- 延云YDB基于spark进行数据分析的一种新方式
- 使用Lua CJSON库进行encode与decode操作完成对Json数据转化
- 【转载】Fiddler进行模拟Post提交json数据，总为null解决方式
- ajax方式实现注册功能(提交数据到后台数据库完成交互)
- 使用Power Designer工具进行数据库设计
- 【框架】[Spring] 基于Spring框架的Web应用演示(附带cglib工具进行动态代理)
- 基于Grove的.NET应用程序开发提示1--数据库主键设置问题
- C++中利用ADO方式进行数据库操作的类，主要用来执行存储过程
- Python 语言 Oracle 数据库基于 SQLAlchemy + Flask + Ajax 的 Json 前后端分离开发博客系统遇到的坑汇总
- 今天总算弄明白了JsonResult怎么跟数据库数据进行交互
- Fiddler进行模拟Post提交json数据，总为null解决方式
- 基于数据库的自动化生成工具，自动生成JavaBean、数据库文档、框架代码等(v5.8.8版)
- 基于Qt的截图工具，实现截图后进行编辑
- 帮助你使用数据库方式访问JSON数据的javascript类库-TaffyDB
- 复习struts2之基于XML配置方式实现对action的所有方法进行校验
- 基于HTML，以GET方式，检查注册用户名是否在数据库中已存在