新手上路,勿喷,谢谢!
最近在学习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集合)
private List<String> list;
//这个就是action的代码 就是调用一下方法 将值赋值给list就好了 ,当然list也可以手动转换成json(本文没有转)
public String selectWhere(){
//按键松开的时候(如果此时删除了输入框中所有的内容,就会传一个空字符串进来,sql语句就会查询所有的值,所以判断一下)
if(!name.equals("")){
//将值放入集合中
list=as.selectAll(name);
}
//返回
return "success";
}
//set get 方法
public String getName() { return name; }
public void setName(String name) {this.name = name;}
public List<String> getList() {return list;}
public void setList(List<String> list) {this.list = 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>