                        課程
                    
                        /后端開發(fā)
                        
                            /Java
                        
                        /Servlet+Ajax實現(xiàn)搜索框智能提示

json出不來！??！求大神指點

package?com.search;

import?net.sf.json.JSONArray;

import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?java.io.IOException;
import?java.util.ArrayList;
import?java.util.List;

/**
?*?${DESCRIPTION}
?*
?*?@author?shenyahui
?*?@create?2018-02-23?16:43
?**/
public?class?SearchServlet?extends?HttpServlet?{
????static?List<String>?datas?=?new?ArrayList<String>();
????//模擬數(shù)據(jù)
????static?{

????????datas.add("ajax");
????????datas.add("ajax?post");
????????datas.add("becky");
????????datas.add("bill");
????????datas.add("james");
????????datas.add("jerry");
????????datas.add("hao");

????}


????@Override
????protected?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)?throws?ServletException,?IOException?{

????????//轉(zhuǎn)換格式
?????????request.setCharacterEncoding("utf-8");
?????????response.setCharacterEncoding("utf-8");

????????System.out.println("123");
????????//首先獲得客戶端發(fā)來的數(shù)據(jù)keyword
????????String?keyword?=?request.getParameter("keyword");
????????//獲得關(guān)鍵字之后進(jìn)行處理，得到關(guān)聯(lián)數(shù)據(jù)
????????List<String>?listData?=?getDatas(keyword);
????????//返回json格式
???????//System.out.print(JSONArray.fromObject(listData));
????????response.getWriter().write(JSONArray.fromObject(listData).toString());
????}
????//獲得關(guān)聯(lián)數(shù)據(jù)
????public?List<String>?getDatas(String?keyword){

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

<%--
??Created?by?IntelliJ?IDEA.
??User:?htcs
??Date:?2018/2/23
??Time:?11:37
??To?change?this?template?use?File?|?Settings?|?File?Templates.
--%>
<%@?page?contentType="text/html;charset=UTF-8"?language="java"?%>
<html>
??<head>
????<title>搜索框只能查詢Demo</title>

??????<style?type="text/css">
??????????#mydiv{
??????????????position:?absolute;
??????????????left:?50%;
??????????????top:?50%;
??????????????margin-left:?-200px;
??????????????margin-top:?-50px;
??????????}

??????</style>
<script?type="text/javascript">

????//后面要多次使用所以定義為全局變量
????var?xmlHttp;
????//獲取用戶輸入內(nèi)容的管理信息的函數(shù)
????function?getMoreContents()?{
????????//首先獲取用戶的輸入
????????var?content?=?document.getElementById("keyword");
????????if?(content.value?==?"")?{
????????????return;
????????}
????????//然后要給服務(wù)器發(fā)送用戶輸入的內(nèi)容，因為我們采用的是ajax異步發(fā)送數(shù)據(jù)，
????????//所以我們要使用一個對象，叫做XmlHttp對象
????????xmlHttp?=?createXMLHttp();//獲得XMLHttp對象;

????????//要給服務(wù)器發(fā)送數(shù)據(jù),escape是為了保持中文
????????var?url?=?"search?keyword="?+?escape(content.value);

????????//true表示JavaScript腳本會在send（）方法后繼續(xù)執(zhí)行，而不會等待來自服務(wù)器的響應(yīng)
????????xmlHttp.open("GET",url,true);

????????//xmlHttp綁定回調(diào)方法，這個回調(diào)方法會在xmlHttp狀態(tài)改變的時候被調(diào)用
????????//xmlHttp的狀態(tài)有0-4.我們只關(guān)心4即complete交互完成
????????xmlHttp.onreadystatechange?=?callback;
????????xmlHttp.send(null);
????}
????????//獲取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;
????????}
????????//回調(diào)函數(shù)
????????function?callback()?{
????????????//4代表完成，200代表響應(yīng)成功
????????????if(xmlHttp.readyState==4){
????????????????if?(xmlHttp.status==200){
????????????????????//交互成功，獲得響應(yīng)的數(shù)據(jù)是文本形式
????????????????????var?result??=?xmlHttp.responseText;
????????????????????//解析獲得數(shù)據(jù)
????????????????????var?json?=?eval("("+result+")");
????????????????????//獲取數(shù)據(jù)后動態(tài)顯示?展示輸入框下面
????????????????????//setContent(json);
????????????????????alert(json);
????????????????}
????????????}
????????}
????????//設(shè)置關(guān)聯(lián)數(shù)據(jù)展示，參數(shù)代表的是服務(wù)器傳遞過來的關(guān)聯(lián)數(shù)據(jù)
????????function?setContent(contents)?{
??????????//首先獲取關(guān)聯(lián)數(shù)據(jù)的長度，以此來確定生成多少<tr></tr>
??????????var?size?=?contents.length;
??????????//設(shè)置內(nèi)容
????????????for(var?i=0;i<size;i++){
????????????????var?nextNode?=?contents[i];//代表的是json格式數(shù)據(jù)的第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?()?{
????????????????????//當(dāng)鼠標(biāo)點擊一個關(guān)聯(lián)數(shù)據(jù)時，關(guān)聯(lián)數(shù)據(jù)自動設(shè)置為輸入框數(shù)據(jù)
????????????????};
????????????????//放文本內(nèi)容，然后層層傳遞，動態(tài)生成數(shù)據(jù)
????????????????var?text?=?document.createTextNode(nextNode);
????????????????td.appendChild(text);
????????????????tr.appendChild(td);
????????????????document.getElementById("content_table_body").appendChild(tr);
????????????}
????????}
</script>
??</head>
??<body>
<div?id="mydiv">
?<%--輸入框--%>
??<input?type="text"?size="50"?id="keyword"?onkeyup="getMoreContents()"/>
??<%--按鈕--%>
??<input?type="button"?value="百度一下"?width="50px"/>
????<%--展示區(qū)域--%>
????<div?id="popDiv">
????????<table?id="content_table"?bgcolor="#FFFAFA"?border="0"?cellspacing="0"?cellpadding="0">

????????????<tbody?id="content_table_body">
????????????<%--動態(tài)查詢出來的數(shù)據(jù),顯示在此--%>

????????????</tbody>

????????</table>
????</div>
</div>
??</body>
</html>