谁有完整的代码可以发一份给我么？-慕课网

首页课程实战体系课手记专栏慕课教程

谁有完整的代码可以发一份给我么？

来源：2-8 显示框美化

春风暖阳

2019-06-13 19:36

谁有完整的代码可以发一份给我么？

写回答关注

2回答

weibo_暖暖大太阳qi_0

2021-01-12 17:45:51

我也是用的idea,跟你写的一样，不过我的后台是用springboot,为什么请求不到呢？？？

0 0

雨过的晴天: 2020-04-17 18:12:02

<%--
  Created by IntelliJ IDEA.
  User: ah_cw
  Date: 2020/4/17
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <style>
        #mydiv{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }
        .mouseOver{
            background: #708090;
            color: #fffafa;
        }
        .mouseOut{
            background: #FFFAFA;
            color: #000000;
        }
    </style>

    <script type="text/javascript">

        //获得用户输入内容的关键信息的函数
        function getMoreContents() {

            //首先获取用户的输入
            var content = document.getElementById("keyword");
            if (content.value==""){
                clearContent();
                return;
            }
            //给服务器发送用户输入内容
            //用XmlHttp对象
            xmlHttp = createXMLHttp();

            //要给服务器发送数据
            var url = "search?keyword="+escape(content.value);

            //true表示javascript脚本会在send()方法之后继续执行,而不会等待来自服务器的响应
            xmlHttp.open("GET",url,true);

            //xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用
            //xmlHttp的状态0-4,我们只关心4(complete) 这个状态
            //当完成之后.再调用回调方法才有意义
            xmlHttp.onreadystatechange=callback;
            xmlHttp.send(null)

        }

        //回调函数
        function callback() {
            //4 代表完成
            if (xmlHttp.readyState==4){
                //200代表服务器响应成功
                if (xmlHttp.status==200){
                    //交互成功,获取相应的数据,是文本格式
                    var result = xmlHttp.responseText;
                    //解析获取的数据
                    var json = eval("("+result+")");
                    //获得数据之后,就可以动态的显示数据,把这些数据展示到输入框的下面
                    setContent(json);
                }
            }
        }

        //设置关联数据的展示.参数代表的是服务器传递过来的关联数据
        function setContent(contents) {
            clearContent();
            //首先获得关联数据的长度,以此来确定生成多少<tr></tr>
            setLocation();
            var size = contents.length;
            //设置内容
            for(var i = 0; i < size; i++ ){
                var nextNode = contents[i];//代表的是json格式数据的第i个元素
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.setAttribute("border","0");
                td.setAttribute("bgcolor","#FFFAFA");
                td.onmouseover=function () {
                    this.className='mouseOver';
                };
                td.onmouseout=function () {
                    this.className='mouseOut';
                };
                td.onclick=function () {
                  //这个方法实现的是,当用鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据
                    var keyword = document.getElementById("keyword");
                    var obj=document.elementFromPoint(event.clientX,event.clientY);
                    keyword.value = obj.innerText;
                    clearContent();
                };
                var text = document.createTextNode(nextNode);
                td.appendChild(text);
                tr.appendChild(td);
                document.getElementById("content_table_body").appendChild(tr);
            }

        }
        //获得XmlHttp对象
        function createXMLHttp(){
            //对于大多数的浏览器适用
            var xmlHttp;
            if (window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }

            //考虑浏览器的兼容性
            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]);
            }
            document.getElementById("popDiv").style.border="none";

        }

        //当输入框失去焦点的时候,关联信息清空
        function keywordBlur() {
            setTimeout(function () {
                clearContent();
            },200);
        }

        //设置显示关联信息的位置
        function setLocation() {
            var content = document.getElementById("keyword");
            var width = content.offsetWidth;//输入框的宽度
            var left = content["offsetLeft"];//到左边框的距离
            var top = content["offsetTop"]+content.offsetHeight;//到顶部的距离
            //获取显示数据的div
            var popDiv = document.getElementById("popDiv");
            popDiv.style.border= "black 1px solid";
            popDiv.style.left  = left+"px";
            popDiv.style.top   = top+"px";
            popDiv.style.width = width+"px";
            document.getElementById("content_table").style.width = width+"px";

        }
    </script>
</head>
<body>
    <div id="mydiv">
        <!--输入框-->
        <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>
        <input type="button" value="百度一下" width="50px">
        <!--下面是内容展示的区域-->
        <div id="popDiv">
            <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
                <tbody id="content_table_body">
                <!--动态查询出来的数据显示在这地方-->

                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

package com.chaoda;

import java.io.IOException;
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 SearchServlet extends HttpServlet {
    static List<String> datas = new ArrayList<>();
    static{
        //模拟数据
        datas.add("ajax");
        datas.add("ajax post");
        datas.add("ajax becky");
        datas.add("bill");
        datas.add("james");
        datas.add("jerry");
    }

    protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //首先获取客户端发送来的数据keyword
        String keyword = request.getParameter("keyword");

        //获得关键字之后进行处理,得到关联数据
        List<String> listData = getData(keyword);

        //放回Json格式
        response.getWriter().write(String.valueOf(JSONArray.fromObject(listData)));

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    public List<String> getData(String keyword){

        List<String> list = new ArrayList<>();
        for (String data :datas){
            if (data.contains(keyword)){
                list.add(data);
            }
        }
        return list;

    }
}

pom.xml 中引入json

<dependency>
  <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>4.11</version>
  <scope>test</scope>
</dependency>

<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>javax.servlet-api</artifactId>
  <version>3.1.0</version>
</dependency>

<dependency>
   <groupId>net.sf.json-lib</groupId>
   <artifactId>json-lib</artifactId>
   <version>2.4</version>          
</dependency>

0 0

Servlet+Ajax实现搜索框智能提示

Java实现搜索框智能提示，熟练掌握使用Servlet和Ajax

37805 学习 · 146 问题

查看课程

相似问题

谁有jar包可不可以分享一份

回答 1

老师，源代码可以发下吗

回答 2

谁有能运行的search.jsp的代码啊，发一下。我的不能运行，只能得到那个xmlHttp对象，感激不尽，

回答 4

还有一个功能没讲完

回答 3

这个项目中海油一个功能没有实现可以讲解一下吗

回答 1

打开慕课网App查看更多内容