Servlet+Ajax实现搜索智能提示及遇到的问题

Posted baorant

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Servlet+Ajax实现搜索智能提示及遇到的问题相关的知识,希望对你有一定的参考价值。

Servlet+Ajax实现搜索智能提示的案例网上很多,先贴上自己使用的代码。

index.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>smart search</title>
<style type="text/css">
.mouseOver {
    background: #00B2EE;
    color: white;
    width: 200px;
}
.mouseOut {
    background: #EDEDED;
    width: 200px;
}
</style>
<script type="text/javascript">
        var xmlHttp;
    //获取用户输入的关联信息的函数
    function getMoreContens() {
        //获取用户输入
        var content = document.getElementById("keyWords").value;
        if (content == "") {
            clearContent();
            return;
        }
        xmlHttp = createXmlHttp();
        //给服务器发送数据
        var url = "search?keyword="+encodeURI(content); 
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange =     //回调函数
            function callback()
        {
            if(xmlHttp.readyState == 4)
                {
                if(xmlHttp.status == 200){
                    var result = decodeURIComponent(xmlHttp.responseText);
                    var json = eval("("+result+")");
                    clearContent(json);
                    intelliSense(json);
                }
                }
        };
        /*
            xmlhttp的send是传递参数用的,但是只有在使用post方式提交请求的时候才有用
            如下:
            xmlhttp.open("post",url,true); 
            ...
            xmlhttp.send("data=data&data2=data2");
             
            用get的话一般就是:
            xmlhttp.open("get",url,true); 
            ...
            xmlhttp.send(null);
        */
        xmlHttp.send(null);
    }
    
    //创建XMLHttpRequest
    function createXmlHttp()
    {
        var xmlHttp;
        if(window.XMLHttpRequest)
            {
            xmlHttp = new XMLHttpRequest();
            //兼容某些Mozilla浏览器的响应头,强制设置为text/xml,具体参看:http://www.cnblogs.com/perseverancevictory/p/3690769.html
               if(xmlHttp.overrideMimeType){  
                   xmlHttp.overrideMimeType("text/xml");
               }
            }
        //兼容IE
        else if(window.ActiveXObject)
            {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            if(!xmlHttp)
                {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
        return xmlHttp;
    }

    function clearContent()
    {
        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 intelliSense(json)
    {
        //获取关联数据的长度
        var size = json.length;
        for(var i=0;i<size;i++)
            {
            var nextNode = json[i];
            var tr= document.createElement("tr");
            var td= document.createElement("td");
            tr.setAttribute("border", "0");
            tr.setAttribute("bgcolor", "#EDEDED");
            td.setAttribute("width", "200px");
            td.onmouseover=function()
            {
                this.className = \'mouseOver\';
            }
            td.onmouseout=function()
            {
                this.className = \'mouseOut\';
            }
            td.onclick=function()
            {
                document.getElementById("keyWords").value=this.innerText;
            }
            var text=document.createTextNode(nextNode);
            td.appendChild(text);
            tr.appendChild(td);
            document.getElementById("content_table_body").appendChild(tr);
            }
    }
</script>
</head>
<body>
    <div>
        <input type="text"  name="keyWords" id="keyWords"  style="width:200px; height:20px;" onkeyup="getMoreContens()" onfocus="getMoreContens()" onblur="clearContent()" /> <input
            type="button" id="button" value="百度一下">
            <div id="popDiv">
            <table id="content_table">
                <tbody id="content_table_body">
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

  web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet-mapping>
    <servlet-name>search</servlet-name>
    <url-pattern>/search</url-pattern>
</servlet-mapping>
<servlet>
    <description>搜索</description>
    <servlet-name>search</servlet-name>
    <servlet-class>com.baorant.search.SearchServlet</servlet-class>
</servlet> 
</web-app>

  SearchServlet类

package com.baorant.search;

import java.io.IOException;
import java.net.URLEncoder;
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 com.alibaba.fastjson.JSON;

public class SearchServlet extends HttpServlet {

    private static List<String> keyWordList = new ArrayList<String>();
    static {
        // 模拟数据
        keyWordList.add("yanwei");
        keyWordList.add("yantian");
        keyWordList.add("yanpeng");
        keyWordList.add("yanweichao");
        keyWordList.add("yanweiqi");
        keyWordList.add("yanyurong");
        keyWordList.add("yanmeirong");
        keyWordList.add("yanweichen");
        keyWordList.add("电影");
        keyWordList.add("电影 66ys");
    }
    private static final long serialVersionUID = 1L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {

        String keyWord = req.getParameter("keyword");
        System.out.println(keyWord);
        List<String> list = keyWord==null?new ArrayList<String>():getDatas(keyWord);
        String json = JSON.toJSONString(list);
        //防止乱码
        String encodeJSON = URLEncoder.encode(json,"UTF-8");
        resp.getWriter().write(encodeJSON);
    }

    public static List<String> getDatas(String keyWord) {
        List<String> list = new ArrayList<String>();
        for (int i = 0; i < keyWordList.size(); i++) {
            if (keyWordList.get(i).contains(keyWord)) {
                list.add(keyWordList.get(i));
            }
        }
        return list;
    }
}

  已直接从工程build path导入fastjson-1.2.2.jar,但仍然报错:java.lang.ClassNotFoundException: com.alibaba.fastjson.JSON

解决方法:将之前直接导入的jar包复制放入项目中lib目录下,重新编译,成功

 

以上是关于Servlet+Ajax实现搜索智能提示及遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

原生AJAX+jsp+servlet实现百度搜索框提示效果

AJAX实现搜索智能提示

百度下拉智能搜索提示

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址

使用ajax遇到的问题及解决方法

通过ajax调用servlet下载文件。