JQuery实现AJAX异步实现搜索框智能提示功能（百度搜索框智能提示）（传输格式为默认普通字符串格式）

心得：使用异步请求服务端响应的数据既可以是普通文本字符串亦可以是另外一个转发后的jsp页面（jsp页面处理后的数据响应给客户端），也可以是xml数据和json数据，根据不同的数据可以在客户端作出响应的接受。

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>Hello Miss Dang</title>
 5 </head>
 6 <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $("#word").keyup(function(){
10             var word = $(this).val();//获得文本框的值
11             if (word != "") {
12                 $.post("${pageContext.request.contextPath}/SearchServlet",{"word":word},function(data){
13                     $("#result").show().html(data);
14                 });
15             }else {
16                 $("#result").hide();
17             }
18         });
19     });
20 </script>
21 <body>
22     <center>
23         <h1>搜索一下</h1>
24         <input id="word" name="word" type="text" style=" 400px;height: 30px;" /><input type="button" value="百度一下" />
25         <div id = "result" style="display:none;position:absolute;top:120px;left:400px;border: 1px solid blue;  400px;height: 300px;"></div>
26     </center>
27 </body>
28 </html>

客户端代码示例

1 public class SearchServlet extends HttpServlet { 2 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 3 String word = request.getParameter("word"); 4 WordService ws = new WordService(); 5 try { 6 List<Word> list = ws.search(word); 7 request.setAttribute("list", list); 8 request.getRequestDispatcher("/info.jsp").forward(request, response); 9 } catch (SQLException e) { 10 e.printStackTrace(); 11 } 12 } 13 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 14 doGet(request, response); 15 } 16 }

1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <script type="text/javascript"> 5 var tr = $("#tdata tr"); 6 tr.mouseover(function() { 7 $(this).css("background-color", "red"); 8 $(this).children("td").css("background-color", "red"); 9 }).mouseout(function() { 10 $(this).css("background-color", "green"); 11 $(this).children("td").css("background-color", "#FFFFFF"); 12 }); 13 </script> 14 <table > 15 <c:forEach var="i" items="${ list }"> 16 <tr> 17 <td>${ i.word }</td> 18 </tr> 19 </c:forEach> 20 </table>

JQuery实现AJAX异步实现搜索框智能提示功能（百度搜索框智能提示）（传输格式为默认普通字符串格式）

相关推荐