基于数据库去完成用json方式进行的工具提示

来源：互联网发布：数据挖掘的特点编辑：程序博客网时间：2024/06/05 00:30

一、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

阅读全文

0 0