利用json方式完成工具提示功能

最新推荐文章于 2023-02-03 14:24:16 发布

林深不见鹿ee

最新推荐文章于 2023-02-03 14:24:16 发布

阅读量349

点赞数

分类专栏： ajax 文章标签： json ajax

本文链接：https://blog.csdn.net/linshenshijianlu/article/details/77413035

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、toolTip1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<!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=index.clientX;
	  y=index.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){
			result=eval("("+xmlHttp.responseText+")");
			 document.getElementById("tip").style.display = "block";
		     document.getElementById("tip").style.top = y;
		     document.getElementById("tip").style.left = x + 10;
		     document.getElementById("tipTable").rows[0].cells[0].innerHTML="图书名称："+result.name;
		     document.getElementById("tipTable").rows[1].cells[0].innerHTML="价格："+result.price;
		}
	 }
 }
  function out(){
		document.all.tip.style.display="none";
	}
</script>
<body>
  <h2>工具提示</h2>
   <br/>
   <br/>
   <a href="#" οnmοuseοver="over(0)" οnmοuseοut="out()">图书一</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(1)" οnmοuseοut="out()">图书二</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(2)" οnmοuseοut="out()">图书三</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(3)" οnmοuseοut="out()">图书四</a>
   <br/>
   <br/>
 <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;height:200px;width:200px;">
   <table id="tipTable">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
 </div>
</body>
</html>

二、ToolByJsonServlet

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;

/**
 * Servlet implementation class ToolByJsonServlet
 */
@WebServlet("/ToolByJsonServlet")
public class ToolByJsonServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ToolByJsonServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String[] shop={"{name:'java web教程',price:62}",
				        "{name:'javascript教程',price:106}",
				          "{name:'java css教程',price:90}",
				          "{name:'java ee教程',price:200}"};
		int index=Integer.parseInt(request.getParameter("index"));
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(shop[index]);
		out.flush();
		out.close();
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

三完成配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4">
<servlet>
    <servlet-name>ToolByXMLServlet</servlet-name>
    <servlet-class>servlet.ToolByXMLServlet</servlet-class><!--类的位置  -->
</servlet>
<servlet-mapping>
    <servlet-name>ToolByXMLServlet</servlet-name><!--你创建的类名  -->
    <url-pattern>/ToolByXMLServlet</url-pattern>
</servlet-mapping>

林深不见鹿ee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用json方式完成工具提示功能

一、toolTip1.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>基于json方式实现工具提示 //定义一个变量，用于存放XMLHttpRequest对象 var xmlHttp; //记录事件发生时的鼠标位置 var x
复制链接

扫一扫