最近再學習ajax,上課老師讓我們實現一個類似百度首頁實現搜索框的功能,剛開始做的時候沒有一點頭緒,查閱大量網上的資源后,發現之前的與我們現在的有些區別,所以在此寫出來,希望能對大家有所幫助.
下面先展示下效果圖:(ps:圖片中的文字是參考的,不具有任何的攻擊意義)
項目的目錄結構:
一:首先是login.jsp頁面 需要注意的是我是通過js的類庫(Jquery)封裝的ajax,需要在webcontent下面導入jquery jar包,代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<style type="text/css">
#shuru {
width: 500px;
height: 35px;
border: 1px solid #c3c3c3;
}
#button {
width: 85px;
height: 37px;
border: 1px solid #c3c3c3;
}
#box {
width: 500px;
border: 1px solid #c3c3c3;
margin-left: -85px;
display: none;
text-align: left
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
//0鍵盤抬起事件 通過div中的ID獲取input輸入框
$("#shuru").keyup(
function() {
$("#box").empty();
//1 獲取輸入框的值
var shuru = $(this).val().trim();
//alert(shuru);
//判斷用戶輸入的是否為空,如果為空不發送ajax
if (shuru != null && shuru != "") {
//2 發送ajax
$.post("loginServlet", "shuru=" + shuru, function(
result) {
//alert(result);
if (result == null || result == "") {
$("#box").css("display", "none");
} else {
//遍歷結果集
$.each(result, function(index, data) {
//alert(index+""+data.message)
//顯示在隱藏div上面
$("#box").append(
"<div>" + data.message + "</div>");
$("#box").css("display", "block");
});
}
}, "json");
} else {
$("#box").css("display", "none");
}
});
})
</script>
</head>
<body>
<center>
<div>
<img alt="" src="img/bd_logo1.png" width="310" height="110">
<div>
<input type="text" id="shuru" name="shuru"><input
type="button" id="button" value="百度一下">
<div id="box"></div>
</div>
</div>
</center>
</body>
</html>
二 為LoginServlrt.servlet 在 servlet包中 代碼如下:
1 package com.wdh.servlet; 2 3 import java.io.IOException; 4 import java.util.List; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.annotation.WebServlet; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 import com.alibaba.fastjson.JSON; 13 import com.wdh.bean.School; 14 import com.wdh.dao.SchoolDao; 15 import com.wdh.dao.SchoolDaoImpl; 16 17 /** 18 * Servlet implementation class LoginServlet 19 */ 20 @WebServlet("/loginServlet") 21 public class LoginServlet extends HttpServlet { 22 private static final long serialVersionUID = 1L; 23 24 protected void doGet(HttpServletRequest request, HttpServletResponse response) 25 throws ServletException, IOException { 26 // 1獲取請求參數 27 String shuru = request.getParameter("shuru"); 28 // 2處理業務 29 SchoolDao schoolDao = new SchoolDaoImpl(); 30 List<School> list = schoolDao.queryMore(shuru); 31 System.out.println(list); 32 // 將list集合轉成 json字符串 33 String json = JSON.toJSONString(list); 34 // 3 響應 35 response.getWriter().write(json); 36 37 } 38 39 protected void doPost(HttpServletRequest request, HttpServletResponse response) 40 throws ServletException, IOException { 41 // TODO Auto-generated method stub 42 doGet(request, response); 43 } 44 45 }
三,連接數據庫使用JDBC連接的數據庫
3在BasicDao.java中是封裝好的對數據庫的增刪改查,創建實現類接口,繼承basicDao,實現查詢語句即可,在數據庫操作語言里面,實現模糊查詢,代碼如圖:
這是第一次寫博客,寫的不好,希望大家包容,我也是希望通過這種方式,來學習,進步,歡迎大家,留言討論