ajax搜索提示框

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>

原文链接：https://www.f2er.com/ajax/160956.html

jsp

select

web.xml

猜你在找的Ajax相关文章