Struts2+Jqajax，一個簡單的搜尋提示demo
阿新 • • 發佈：2018-12-21
新手上路，勿噴，謝謝！
最近在學習java web 相關的知識， 學習了strut2 和jq後，突然想能不能做一個簡單的搜尋提示出來，然後就有了下面的小demo （勿噴！勿噴！勿噴！），廢話不多說了，開始正題！
準備工作
導包
1.jdbc （本文用的是oracle的資料庫）
2.struts2核心jar包不用多說了，其次要把struts2關於json的jar包匯入（截圖如下）
3.JQUERY的庫 也不要忘了
下面就開始擼程式碼了
效果圖（是有點簡陋啊，咳咳）
JSP部分
$(document).ready(function () { //鍵盤按鈕鬆開的時候觸發 $("#keyin").keyup(function () { //為了省事兒 ，每次觸發按鍵事件的時候 先清楚已經提示的訊息 $("ul").children().remove(); //獲取輸入框中的值 var name=$(this).val(); //當然是使用jq封裝好的方法啦 ajax （預設是非同步請求，就不用修改了） $.ajax({ //url代表請求的action地址 url:'${pageContext.request.contextPath}/stajax/selectWhere', //post的方式傳值 type:'POST', //需要傳遞過去的值（本文只查詢資料庫中的名字，只有一個引數） data:{ "name":name }, //型別 ：json 當然還有text，xml等等型別，但是本例子用的是json datatype:'json', //成功後執行的方法 data代表返回的資料 success:function(data){ //遍歷這個傳回的值 for(i=0;i<data.length;i++){ //將值新增到ul標籤裡面 $("ul").append("<li>"+data[i]+"</li>"); } } //當然了 這邊還有失敗後要執行的方法（本文沒寫） error： }); }); }); ```html <html> <head> <title>JqAjax</title> <style type="text/css"> *{ margin: 0px; padding: 0px;} .tinput{ margin-top: 150px;margin-left: 400px;} .tinput #keyin{ width: 400px; height: 30px} .tinput .search{ height: 35px;width: 100px; background: aquamarine} .tcontent{ margin-top: 0px;margin-left: 400px;width: 405px; height: 300px;} .tcontent ul li{ list-style: none;} </style> </head> <body> <div class="tbody"> <%--輸入框的div--%> <div class="tinput"> <input value="" type="text" id="keyin"/><input type="button" value="點選搜尋" class="search"/> </div> <%--提示內容的div--%> <div class="tcontent"> <ul> </ul> </div> </div> </body> </html>
struts2中的action
package action;
import service.AjaxService;
import service.impl.AjaxServiceImpl;
import java.util.List;
public class AjaxDemoAction {
//事務（裡面是資料的模糊匹配查詢的一個方法）
private AjaxService as=new AjaxServiceImpl();
//接收jsp傳過來的程式碼
private String name;
//這個是返回給jsp的值 （因為只查詢名字，為了方便用了list集合） <!--這裡一定要繼承json-default-->
<package name="stajax" namespace="/stajax" extends="json-default">
<action name="selectWhere" class="action.AjaxDemoAction" method="selectWhere">
<!--type型別要寫上json-->
<result name="success" type="json">
<!--把list寫在這裡回返回給jsp頁面-->
<param name="root">list</param>
</result>
</action>
</package>