ajax搜索提示框

来源：互联网发布：android md源码编辑：程序博客网时间：2024/05/12 07:11

jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <style>    .mouseOver{        background: #708090;        color:#FFFAFA;    }    .mouseOut{        background: FFFAFA；        color#000000;    }  </style><script type="text/javascript">    //创建xmlHttp    function  getMoreContens() {        var xmlHttp;        var content = document.getElementById("keyword").value;        if (content == ""){            alert('为空');            clearContent();            return ;        }        //输入框由内容 ， 创建xml对象        xmlHttp = createXmlHttp();        //alert(conten+xmlHttp);        //发送到服务器        var url = "servlet?keyword="+content; //以get方式将参数带到servlet中        xmlHttp.open("GET",url, true);        xmlHttp.send(null);        xmlHttp.onreadystatechange = function callback()        {            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) //响应完成 且成功                {                    //获取文本信息                    var result = xmlHttp.responseText; //由服务器返回的信息                    //解析获得的数据                    var json = eval("("+result+")"); //进行解析                    //获取到 了 后台的数据alert(json);                     setContent(json)                }        };        //设置显示的数据        function setContent(contents){            clearContent();            var size = contents.length; //获取到数据的长度            for (var i=0; i<size; i++){                var nextNode = contents[i];                var tr = document.createElement("tr");                var td = document.createElement("td");                tr.setAttribute("border", 0);                tr.setAttribute("bgcolor", "#FFFAFA");                td.setAttribute("width", "200px");                //鼠标对td的事件                td.onmouseover=function(){                    this.className = 'mouseOver';                };                td.onmouseout=function(){                    this.className = 'mouseOut';                };                td.onclick=function(){                    //当鼠标点击数据自动显示在输入框                };                var text = document.createTextNode(nextNode);                td.appendChild(text); //文本放进td                tr.appendChild(td); //td放进tr                document.getElementById("content_table_body").appendChild(tr);            }        };    }    //清空之气那的数据    function clearContent(){        //得到tablebody        var contentTableBody = document.getElementById("content_table_body");        //获取表格子元素的个数        var size = contentTableBody.childNodes.length;        for (var i = size-1; i>=0; i--){            contentTableBody.removeChild(contentTableBody.childNodes[i]);        }     };    //输入框失去焦点    function keywordBlur(){        clearContent();    }    //创建xml对象    function createXmlHttp() {        var xmlHttp;        if(window.XMLHttpRequest)            {            xmlHttp = new XMLHttpRequest();            }        //兼容IE        else if(window.ActiveXObject)            {            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            if(!xmlHttp)                {                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");                }            }        return xmlHttp;    }</script>  </head>  <body>    <div>        <input type="text" name="keyword" id="keyword" onkeyup="getMoreContens()"  onblur="keywordBlur()"        onfocus="getMoreContens()">        <button>百度一下</button>        <div id="popDiv"">            <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0">                <tbody id="content_table_body">                    <!-- 显示内容区域 -->                </tbody>            </table>        </div>    </div>  </body></html>

select

package ajax;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class Servlet extends HttpServlet {    static List<String> datas = new ArrayList<String>();    static{        datas.add("app");        datas.add("add");        datas.add("boy");        datas.add("book");        datas.add("cat");        datas.add("ccc");    }    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        //获取客户端发送过来的数据        String keyword = request.getParameter("keyword");        System.out.println("keyword="+keyword);        //得到关联数据        List<String> listData = getData(keyword);        //返回json格式        JSONArray.fromObject(listData);        System.out.println("json"+JSONArray.fromObject(listData));        //传到前台        response.getWriter().write(JSONArray.fromObject(listData).toString());    }    public List<String> getData(String keyword){        List<String> list = new ArrayList<String>();        for (String data:datas){            if (data.contains(keyword)){                list.add(data);            }        }        return list;    }}

web.xml

<?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/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  <display-name>ajax</display-name>  <servlet>    <description>This is the description of my J2EE component</description>    <display-name>This is the display name of my J2EE component</display-name>    <servlet-name>Servlet</servlet-name>    <servlet-class>ajax.Servlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>Servlet</servlet-name>    <url-pattern>/servlet</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.html</welcome-file>    <welcome-file>index.htm</welcome-file>    <welcome-file>index.jsp</welcome-file>    <welcome-file>default.html</welcome-file>    <welcome-file>default.htm</welcome-file>    <welcome-file>default.jsp</welcome-file>  </welcome-file-list></web-app>

阅读全文

0 0