dwr示例

发表时间:2017-05-16 15:51:52 浏览量( 25 ) 留言数( 0 )

学习目标:

1、掌握使用dwr


学习过程:

一、dwr的转换器

dwr有很多转换器,其中bean转换器可以把对象转换为json格式。

你可以为某一个单独的类打开转换器: 

<convert converter="bean" match="your.full.package.BeanName"/> 

如果要允许转换一个包或者子包下面的所有类,可以这样写: 

<convert converter="bean" match="your.full.package.*"/>

显而易见,这样写是允许转换所有的JavaBean: 

<convert converter="bean" match="*"/> 

二、示例。

一个是上一节的示例,这里我们使用dwr重写,一个是级联示例,以前虽然我们也做过级联,不过今天我们要做的ajax的级联。

1、添加两个Pojo对象。

Employee对象代码如下:

public class Employee implements java.io.Serializable {


	private Integer employeeId;
	private String employeeName;
	private Date birthday;
	private String card;
	private Double salary;
	private String picture;
	private String addr;
	//后面的的get/set方法自己补充,这里就不写出来了。

二级是Second对象代码如下:

public class Second {
	
	private Integer sid;
	private String name;
	//后面的的get/set方法自己补充,这里就不写出来了。

2、对应的在dwr.xml中添加两个转换器

		<convert match="com.pojo.Employee" converter="bean">
		   <param name="include">employeeName,addr</param>
		</convert>
		
		<convert match="com.pojo.Second" converter="bean">
		  
		</convert>

3、添加两个Biz方法

EmployeeBiz对象代码如下:

public class EmployeeBiz {

	public List<Employee> getAll(){
		 List<Employee> employees=new ArrayList<Employee>();
		 
		 Employee employee1=new Employee();
		 employee1.setAddr("北京");
		 employee1.setEmployeeName("张三");
		 
		 Employee employee2=new Employee();
		 employee2.setAddr("上海");
		 employee2.setEmployeeName("李四");
		 
		 employees.add(employee1);
		 employees.add(employee2);
		 
		 return employees;
	}
	

}

RegionBiz对象代码如下:

public class RegionBiz {

	public List<Second> getSecondsByFirst(int fid) {
		List<Second> seconds = new ArrayList<Second>();

		if (fid == 1) {
			Second second = new Second();
			second.setSid(1);
			second.setName("佛山市");

			Second second1 = new Second();
			second1.setSid(2);
			second1.setName("广州市");

			seconds.add(second);
			seconds.add(second1);
		} else if (fid == 2) {
			Second second = new Second();
			second.setSid(1);
			second.setName("桂林市");

			Second second1 = new Second();
			second1.setSid(2);
			second1.setName("南宁市");

			seconds.add(second);
			seconds.add(second1);

		} else {
			Second second = new Second();
			second.setSid(1);
			second.setName("平遥市");

			Second second1 = new Second();
			second1.setSid(2);
			second1.setName("太原市");

			seconds.add(second);
			seconds.add(second1);
		}

		return seconds;
	}
	


}


4、对应在dwr.xml添加两个creator

<create javascript="employeebiz" creator="new">
		  <param name="class" value="com.biz.EmployeeBiz"></param>
		</create>
		
		<create javascript="regionBiz" creator="new">
		  <param name="class" value="com.biz.RegionBiz"></param>
		</create>

5、dwrdemo.jsp页面代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'dwr.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type='text/javascript'
	src='/dwrstu/dwr/interface/employeebiz.js'></script>
<script type='text/javascript' src='/dwrstu/dwr/interface/regionBiz.js'></script>
<script type='text/javascript' src='/dwrstu/dwr/engine.js'></script>

<script type="text/javascript">
	function selemp() {
		employeebiz.getAll(callback);
	}

	function callback(data) {

		$("#emptable").html("<tr><td>用户名</td><td>地址</td></tr>");
		$.each(data, function(i, n) {

			$("#emptable").append(
					"<tr><td>" + n.employeeName + "</td><td>" + n.addr
							+ "</td></tr>");

		});
	}

	function selsecond() {
		var fid = document.getElementById("first").value;
		if(fid!='0'){
		   regionBiz.getSecondsByFirst(fid, call2);
		}else{
		   $("#second").html("<option value='0'>--请选择--</option>");
		}
		
	}
	
	function call2(data){
	   $("#second").html("<option value='0'>--请选择--</option>");
	   
	   $.each(data, function(i, n) {

			$("#second").append("<option value='"+n.sid+"'>"+n.name+"</option>");

		});
	   
	}
	
</script>


</head>

<body>
	<input value="查询用户" type="button" id="employee" onclick="selemp()" />
	<table id="emptable">
		<tr>
			<td>用户名</td>
			<td>地址</td>
		</tr>

	</table>

	<!-- 异步级联 -->
	<br /> 省:
	<select id="first" onchange="selsecond()">
	 <option value="0">--请选择--</option>
		<option value="1">广东</option>
		<option value="2">广西</option>
		<option value="3">山西</option>
	</select> 市:
	<select id="second">
		<option value="0">--请选择--</option>
	</select>
</body>
</html>