老师源码分享一下可以吗
最下面第6行，应该是Json吗
谢谢。
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax 百度搜索</title>
<style type="text/css">
#searchDiv{position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-50px;height:50px;}
#popDiv{width:400px;position:absolute;top:50%;left:50%;height:200px;margin-left:-120px;}
#popDiv .show{color:#000;width:400px;height:20px;}
#popDiv .show:HOVER{background-color:#eee;}
</style>
</head>
<body>
<div id="searchDiv">
<input type="text" name="s" id="keyWord" onkeyup="getMore();" onfocus="getMore();" onblur="keyBlur();">
<input type="button" value="百度一下">
<div id="popDiv">
</div>
</div>
<script type="text/javascript">
var xmlHttp;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
function getMore(){
var content = document.getElementById("keyWord");
if(content.value==""){
document.getElementById("popDiv").innerHTML="";
return ;
}
xmlHttp = createXMLHttp();
var url="http://localhost:8080/clb/getMore?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);
}
var temp;
//回调函数
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//alert(xmlHttp.readyState+" "+xmlHttp.status);
var result = xmlHttp.responseText;
temp = result;
//解析获得的数据
var json = eval("("+result+")");
//获取数据之后进行动态显示到输入框的下面。
setContent(json);
}
}
}
//设置关联数据的展示
function setContent(contents){
var size = contents.length;
document.getElementById("popDiv").innerHTML="";
for(var i = 0;i<size;i++){
var nextNode = contents[i];//代表的是json格式数据的第i个元素
var div=document.createElement("div");
div.setAttribute("class","show");
div.onclick=function(){
//实现鼠标点击一个关联的数据时关联数据自动设置为输入框
};
var text = document.createTextNode(nextNode);
div.appendChild(text);
document.getElementById("popDiv").appendChild(div);
}
}
function keyBlur(){
document.getElementById("popDiv").innerHTML="";
}
</script>
</body>
</html>@ResponseBody
@RequestMapping(value = "getMore", method = RequestMethod.GET,
//解决第三方乱码问题
produces={"application/json;charset=UTF-8"})
public String getMore(@RequestParam(value="keyword") String keyword) {
Gson gson = new Gson();
return gson.toJson(getList(keyword));
}
private List<String> getList(String keyword){
List<String> list = new ArrayList<String>();
list.add("ajax");
list.add("a");
list.add("b");
list.add("c");
list.add("ab");
list.add("ajax up");
list.add("d");
list.add("ajcx");
List<String> list1 = new ArrayList<String>();
for(String s:list){
if(s.contains(keyword)){
list1.add(s);
}
}
return list1;
}