效果
开发结构参考AJAX,JSON用户校验
主要有两个核心文件
1，处理输入字符，进行后台搜索的servlet
Suggest.java
1 package org.guangsoft.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.sql.Connection; 6 import java.sql.PreparedStatement; 7 import java.sql.ResultSet; 8 import java.util.ArrayList; 9 import java.util.List; 10 11 import javax.servlet.ServletException; 12 import javax.servlet.http.HttpServlet; 13 import javax.servlet.http.HttpServletRequest; 14 import javax.servlet.http.HttpServletResponse; 15 16 import org.guangsoft.dao.SqlHelper; 17 18 import com.google.gson.Gson; 19 20 public class Suggest extends HttpServlet 21 { 22 23 public void doGet(HttpServletRequest request, HttpServletResponse response) 24 throws ServletException, IOException 25 { 26 processRequest(request, response); 27 } 28 29 public void doPost(HttpServletRequest request, HttpServletResponse response) 30 throws ServletException, IOException 31 { 32 processRequest(request, response); 33 } 34 35 protected void processRequest(HttpServletRequest request, 36 HttpServletResponse response) throws ServletException, IOException 37 { 38 request.setCharacterEncoding("UTF-8"); 39 response.setCharacterEncoding("UTF-8"); 40 response.setContentType("text/html; charset=utf-8"); 41 PrintWriter out = response.getWriter(); 42 String word = request.getParameter("word"); 43 Connection connection = null; 44 PreparedStatement prepareStatement = null; 45 ResultSet resultSet = null; 46 List wordList = new ArrayList<String>(); 47 try 48 { 49 connection = SqlHelper.getConnection(); 50 String sql = "select * from user where username like ? limit 0,5"; 51 prepareStatement = connection.prepareStatement(sql); 52 prepareStatement.setString(1,"%"+word+"%"); 53 resultSet = prepareStatement.executeQuery(); 54 while(resultSet.next()) 55 { 56 wordList.add(resultSet.getString("username")); 57 } 58 Gson gson = new Gson(); 59 response.getWriter().print(gson.toJson(wordList)); 60 } 61 catch(Exception e) 62 { 63 e.printStackTrace(); 64 } 65 finally 66 { 67 SqlHelper.close(connection, prepareStatement, resultSet); 68 } 69 } 70 }
2，展示前台
suggest.java
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <script src="/ajax/js/AjaxUtil.js"></script> 12 <style> 13 #div01 14 { 15 border:1px gray solid; 16 width:312px; 17 height:115px; 18 display:none; 19 } 20 li 21 { 22 list-style:none; 23 width:310px; 24 } 25 li:hover 26 { 27 background-color: aqua; 28 cursor:pointer; 29 } 30 31 </style> 32 <script> 33 function search(word) 34 { 35 var div01 = document.getElementById("div01"); 36 if(word != "") 37 { 38 sendAjaxReq("get","suggest?word="+word,null,function(data) 39 { 40 eval("var wordList="+data); 41 div01.innerHTML = ""; 42 if(wordList.length != 0) 43 { 44 for(var i = 0; i < wordList.length; i++) 45 { 46 div01.innerHTML += "<li onclick='setWord(this);'>"+wordList[i]+"</li>" 47 } 48 div01.style.display = "block"; 49 } 50 }); 51 } 52 else 53 { 54 div01.style.display ="false"; 55 } 56 } 57 function setWord(li) 58 { 59 document.getElementById("word").value = li.innerHTML; 60 document.getElementById("div01").innerHTML = ""; 61 } 62 </script> 63 </head> 64 65 <body> 66 <div id="showDiv"> 67 <input type="text" name="word" id="word" size="40" 68 onkeyup="search(this.value);" /> 69 <input type="button" value="百度一下" onclick="search()"> 70 <div name="div01" class="div01" id="div01"></div> 71 </div> 72 </body> 73 </html>