具體代碼分析

搜索框代碼

這個代碼核心就是鍵盤按下之後執行searchWord方法

該方法獲取搜索框中的內容word，並且訪問SearchWordServlet傳遞給它word參數，就是當前的搜索框信息

通過ProductListService調用findAllProductByWord（word），然後調用ProductListDao的findAllProductByWord（word）

這個查詢並不是查詢查詢所有的商品信息，而是隻查詢一列，商品信息列，所以可以使用ColumnListHandler,返回List

上圖標紅的地方就是使用json處理工具。能夠處理將一個集合或者數組轉成json串，上面工具的使用都是固定的

json的轉換插件是通過java的一些工具，直接將java對象或集合轉換成json字符串。

常用的json轉換工具有如下幾種：

1）jsonlib

2）Gson：google

3）fastjson：阿里巴巴

jsonlib需要導入的包為

gson需要導入的包

數據寫到客戶端之後，$.post的響應函數會運行

這個函數中參數data就是服務器端返回的數據，這個是一個json類型的集合，如果它不是空的（就是查到了）我們可以遍歷它，把他的存儲的每項pname，放到

組成的content，然後將顯示查詢結果的div內部設置成這個content（$("#showDiv").html(content)）,然後設置成顯示（$("#showDiv").css(“display”，“block”)）

當然為了一些其它的效果我們填了一些樣式和事件，比如onmouseover，鼠標移入的時候高亮顯示，onmouseout鼠標移除的時候不亮顯示，cursor：pointer是鼠標放到這個div上時，鼠標編程小手，onclick是鼠標點擊這個div的時候，將其點擊的這個div的內容放到搜索框中，並且不再顯示

我們要獲取搜索框對象$("#search").val的內容設置為

中間的pname

中間的pname，這個pname不是value而是html，所以要獲取到$(obj).html()

自此所有功能和操作就全部完成了

閱讀更多 幻風的編程日記 的文章

關鍵字: Word 編程語言 HTML