課程
/后端開發
/Java
/Servlet+Ajax實現搜索框智能提示
誰有完整的代碼可以發一份給我么?
2019-06-13
源自:Servlet+Ajax實現搜索框智能提示 2-8
正在回答
我也是用的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>
舉報
Java實現搜索框智能提示,熟練掌握使用Servlet和Ajax
1 回答誰有jar包可不可以分享一份
2 回答老師,源代碼可以發下嗎
4 回答誰有能運行的search.jsp的代碼啊,發一下。我的不能運行,只能得到那個xmlHttp對象,感激不盡,
3 回答還有一個功能沒講完
1 回答這個項目中海油一個功能沒有實現可以講解一下嗎
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2021-01-12
我也是用的idea,跟你寫的一樣,不過我的后臺是用springboot,為什么請求不到呢???
2020-04-17
pom.xml 中引入json