采用DWR、maven保存数据到数据库
一、原理： Ajax是时下比较流行的一种web界面设计新思路,其核心思想是从浏览器获取XMLHttp对象与服务器端进行交互. DWR（Direct Web Remoting）就是实现了这种Ajax技术的一种web框架. 最近做的项目中我也将它用上了,感觉很是方便,比如动态生成javascript代码,隐藏的http协议,java代码和javascript交互的是javascript的对象(或字符串).
二、步骤：
1.导入DWR所需要的jar包，dwr.jar ,commons-loggong.jar（日志处理）,pom.xml.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>cn.com.liveuc.dwr</groupId> <artifactId>dwr</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>dwr Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.7</version> <scope>test</scope> </dependency> <dependency> <groupId>org.apache.geronimo.bundles</groupId> <artifactId>dwr</artifactId> <version>3.0.M1_1</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.1.3</version> </dependency> <dependency> <groupId>tomcat</groupId> <artifactId>servlet</artifactId> <version>4.1.36</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.14</version> </dependency> </dependencies> <build> <finalName>dwr</finalName> </build> </project>
2.在web.xml中配置dwr的拦截器
<!--配置dwr拦截器--> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <description>Direct Web Remoter Servlet</description> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <!--dwr调试--> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>crossDomainSessionSecurity</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>allowScriptTagRemoting</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>scriptCompressed</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
3.编写js要调用的Java类
/**
* js访问方法
* @author Administrator
*
*/
public class UserDaoADwr {
UserDao userDao = new UserDao();
/**
* 保存用户
* @param user 保存对象
* @return 是否保存成功
*/
@SuppressWarnings("static-access")
public boolean saveUser(User user) {
return userDao.saveUser(user);
}
/**
* 查询
* @param id 查询条件用户id
* @return 查询出的用户
*/
@SuppressWarnings("static-access")
public User findUserById(Integer id) {
return userDao.findUserById(id);
}
}
4.在WEB-INF下配置dwr配置文件dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<!-- 类自动转换为js -->
<create creator="new" javascript="UserDaoDwrjs" class="cn.com.liveuc.dwr.js.UserDaoADwr">
</create>
<!-- 表示Java和js转换 -->
<convert converter="bean" match="cn.com.liveuc.dwr.domain.User" />
<!--
<create creator="new" javascript="***js调用的class***" class="***java里暴露的class,必须写完整路径***">
<include method="***java暴露类里要公开的方法，如果不写默认全部公开***" />
</create>
<convert converter="bean" match="***一般来说是javabean***"> //int,String,list等不需要显式的转换就可以被js拿到
<param name="include" value="***javabean中的属性，用','隔开***" /> //这句可以不写
</convert>
<creator>标签负责公开用于Web远程的类和类的方法，<convertor>标签则负责这些方法的参数和返回类型。convert元素的作用是告诉DWR在服务器端Java 对象表示和序列化的JavaScript之间如何转换数据类型。
-->
</allow>
</dwr>
5、Jsp页面用户注册，直接js调用Java方法保存用户
<script type="text/javascript">
function submitt() {
var userMap = {};
userMap.id = regForm.id.value;
userMap.username = regForm.username.value;
userMap.password = regForm.password.value;
userMap.email = regForm.password.value;
UserDaoDwrjs.saveUser(userMap, userFun);//调用Java方法保存用户
}
function userFun(data) {
if (data) {
alert("注册成功");
} else {
alert("注册失败");
}
}
</script>
</head>
<body>
<table align="center" border="0">
<form name="regForm">
<tr>
<td>登陆Id：</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交"
onclick="submitt()"></td>
</tr>
</form>
</table>
</body>
</html>
6.js调用Java方法更加id查找用户
<body>
<form name="findForm">
<table align="center">
<tr>
<td>查询ID：</td>
<td><input type="text" name="id"></td>
</tr>
<input type="submit" value="查询" onclick="selectUser()">
</table>
</form>
</body>
</html>
<script type="text/javascript">
function selectUser() {
UserDaoDwrjs.findUserById(findForm.id.value, {
callback:function(data) {
if (data == null) {
alert("用户不存在");
return;
}
alert("用户为：" + data.id + "用户名为：" + data.username);
},
async:true
});
}
</script>