ajax2.jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/prototype1.6.js"></script> <script type="text/javascript"> function showEmps(){ new Ajax.Request( "empserv?t="+new Date().getTime(), { method:"post", parameters:{"name":$F("name")}, onSuccess:function(req){ var emps = req.responseText.evalJSON(); //清空table表格 clearTable(); //循环生成table列表 for(i=0;i<emps.length;i++){ var emp = emps[i]; //在table最后位置添加一行tr var tr = $("tb").insertRow($("tb").rows.length); tr.onmouseover = function(){ this.style.backgroundColor = "#00FFFF"; } tr.onmouseout = function(){ this.style.backgroundColor = "#FFFFFF"; } //添加td,显示name var name_td = tr.insertCell(tr.cells.length); name_td.innerHTML = emp.name; name_td.onclick = function(){ $("name").value = this.innerHTML; //清空table表格 clearTable(); } //添加td,显示salary var sal_td = tr.insertCell(tr.cells.length); sal_td.innerHTML = emp.salary; } } } ); } function clearTable(){ var len = $("tb").rows.length; for(i=len-1;i>=0;i--){ $("tb").deleteRow(i); } } </script> </head> <body> <input type="text" name="name" id="name" οninput="showEmps()" οnkeyup="showEmps()"/> <input type="button" value="清空" οnclick="clearTable()"/> <input type="button" value="查询" οnclick="showEmps()"/> <hr> <table id="tb"></table> </body> </html>
EmpServlet :
package serv;
import java.io.IOException; import java.io.PrintWriter; import java.io.UnsupportedEncodingException; import java.sql.SQLException; import java.util.List;
import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import dao.EmployeeDAO;
public class EmpServlet extends HttpServlet{ public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException{ doGet(request,response); } public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException{ request.setCharacterEncoding("utf-8"); String name = request.getParameter("name"); System.out.println(name); response.setContentType("text/json;charset=utf-8"); EmployeeDAO empDAO = new EmployeeDAO(); try { List list = empDAO.findLikeName(name); JSONArray json = JSONArray.fromObject(list); String emps = json.toString(); System.out.println(emps); PrintWriter out = response.getWriter(); out.print(emps); out.close(); } catch (Exception e) { e.printStackTrace(); } } }