Struts2+Jqajax,一个简单的搜索提示demo

新手上路,勿喷,谢谢!
最近在学习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>

本文到这里就结束啦

猜你喜欢

转载自blog.csdn.net/cheng6202/article/details/84143172
今日推荐