谁有完整的代码可以发一份给我么？
我也是用的idea,跟你写的一样，不过我的后台是用springboot,为什么请求不到呢？？？
<%--
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>