SSH学习项目struts2的JSON 练习 花卉Flower

准备工作

1.项目素材：点击下载 提取码：hs37
2.使用struts2的JSON 完成页面显示
3.使用struts2的JSON 完成页面分页
4.使用struts2的JSON 完成条件查询

开始工作

分析一个报错

原因：

1.hibernate类型,在生成的类中，comm字段与mgr字段为double 类型，为基本类型，不能为NULL

2.Oracle数据库的Emp表里comm列与mgr列有数据为空所以解决方法就是升为包装类，可以为NULL

private Double mgr;
private Double comm;
//同时映射文件也要设置
<property name="mgr"   column="mgr" type="java.lang.Double" />
<property name="comm"   column="comm" type="java.lang.Double"/>

检验是否有数据吧
地址栏输入：http://localhost:8080/ssh/page
将准备好的素材添加进项目

emp_list.html页面代码修改一番

<div id="main">
   <h1>员工列表</h1>
   <div id="search">
   	   <input type="hidden" name="page" id="page" value="1"/>  
	      姓名:<input type="text" id="ename" value=""/>&nbsp;
		  收入:<input type="text" id="beginPrice" value="">到<input type="text" id="endPrice" value="">
		  <input type="submit" value="搜索" />
	   </form>
   </div>
   <div id="Emps">
   		<dl>
		  <dt>编号</dt>
		  <dd>张三</dd>
		  <dd>收入:3000</dd>
		  <dd>开发部</dd>
		  <dd>入职日期:2011-8-1</dd>
		  <dd><a href="#">修改</a>&nbsp;<a href="#">删除</a>
		</dl>
		<dl>
		  <dt>编号</dt>
		  <dd>张三</dd>k
		  <dd>收入:3000</dd>
		  <dd>开发部</dd>
		  <dd>入职日期:2011-8-1</dd>
		  <dd><a href="#">修改</a>&nbsp;<a href="#">删除</a>
		</dl>
   </div>  
   <div id="pp">
    	
  	</div>
</div>

-创建函数loadInfos 使用Ajax 读取JSON

function loadInfos(){
		   $.ajax({
			   url:"/MyCompany/page"
			   ,data:{
				   page:$("#page").val()
				   ,name:$("#ename").val()
				   ,beginPrice:$("#beginPrice").val()
				   ,endPrice:$("#endPrice").val()
				   }
		       ,type:"post"
		       ,dataType:"json"
		       ,success:function(d){
		    	   //分页按钮刷新
		    	   $("#pp").empty();
		    	   for(var i=1;i<=d.pageCount;i++){
		    		   $("#pp").append("<a href='javascript:changePage(@1)'>@2</a>"
		    				   .replace('@1',i).replace('@2',i));
		    	   }
		    	   //刷新列表
		    	   var ss=
		    	    "<dl>"
		             +"<dt>@1</dt>"
		             +"<dd>@2</dd>"
		             +"<dd>收入:@3</dd>"
		             +"<dd>@4</dd>"		
		             +"<dd>入职日期:@5</dd>"
		             +"<dd>"
		             +"		<a href='#'>修改</a>&nbsp;"
		             +"		<a href='#'>删除</a>"
		             +"</dd>"	
		             +"</dl>";
		    	   
		    	   $("#Emps").empty();
		    	   for(var j=0;j<d.list.length;j++){
		    		   var e=d.list[j];
		    		   $("#Emps").append(
		    				   ss.replace("@1",e.id)
		    				   	 .replace("@2",e.ename)
		    				   	 .replace("@3",e.sal)
		    				   	 .replace("@4",e.dept.Dname)
		    				   	 .replace("@5",e.hiredate)
		    		   );
		    	   }
		       }
			 }
		   );
	   }

-创建函数changePage 进行跳转Page跳转

function changePage(p){
		   $("#page").val(p);
	   }

但是跳转完后需要加载当前页的数据，所以需要

function changePage(p){
	   $("#page").val(p);
	   //跳转页面 更改页面value值 并调用调用读取数据
	   loadInfos();
   }

给搜索按钮绑定函数开始看看成功了嘛？

<input type="submit" value="搜索" onclick="$('#page').val(1);loadInfos()" />

点击搜索看看！

点击页面看看是否跳转