AngularJS与后端联系实质上就是javascript与后端的联系，传送的就是json对象，只是AngularJS的双向数据绑定非常实用，它可以帮助我们少写很多javascript代码，它的强大之处不用再多介绍。。
首先导入项目所需jar包，这里有DWR的jar包和JSON的jar包：
这里还需要配置DWR框架，省略。。。。
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 ng-app="UserSignUpModule"> <head> <base href="<%=basePath%>"> <title>User Sign Up</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type=‘text/javascript‘ src=‘<%=basePath%>dwr/engine.js‘></script> <script type=‘text/javascript‘ src=‘<%=basePath%>dwr/util.js‘></script> <script type=‘text/javascript‘ src=‘<%=basePath%>dwr/interface/UserService.js‘></script> </head> <body> <h2>User Sign Up</h2><hr/> <form ng-controller="UserSignUpCtrl"> Email：<input type="text" ng-model="user.email"><br/> Password：<input type="password" ng-model="user.password"><br/> TelPhone：<input type="text" ng-model="user.telPhone"><br/> <button ng-click="signUp()">提交</button> <button ng-click="clear()">清空</button> </form> <script type="text/javascript" src="<%=basePath%>/ch8/dwr.js"></script> </body> </html>
js代码：
var userSignUp = angular.module("UserSignUpModule",[]);//写一个angular模块
userSignUp.controller("UserSignUpCtrl",["$scope",function($scope){
$scope.user={email:"",password:"",telPhone:""};//json model
$scope.signUp=function(){
/**
* 调用后台java类，添加用户
* JSON.stringify($scope.user)方法是把json对象$scope.user转化成json字符串
* 另外，json字符串转化成json对象：$scope.user = JSON.parse(jsonStr);
*/
//这里调用后台java类，并把json字符串作为参数传入
UserService.signUp(JSON.stringify($scope.user),function(){
});
};
$scope.clear=function(){
$scope.user={email:"",password:"",telPhone:""};
};
}]);
后台java代码：
实体类，这里面的字段需要和angularJS的model的字段一一对应：
package com.lin.angular.entity;
public class User {
private String email;
private String password;
private String telPhone;
public User() {
super();
}
public User(String email, String password, String telPhone) {
super();
this.email = email;
this.password = password;
this.telPhone = telPhone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getTelPhone() {
return telPhone;
}
public void setTelPhone(String telPhone) {
this.telPhone = telPhone;
}
@Override
public String toString() {
return "User [email=" + email + ", password=" + password
+ ", telPhone=" + telPhone + "]";
}
}
业务类：
package com.lin.angular.service;
import com.lin.angular.entity.User;
import com.lin.angular.util.JSONService;
public class UserService {
public void signUp(String jsonStr)
{
User user = (User) JSONService.getInstance().jsonString2Object(jsonStr, User.class);
signUp(user);
}
public void signUp(User user)
{
/**
* 这里调用JDBC 的 API把该用户加入到数据库
*/
System.out.println("-------------------------用户注册------------------------");
System.out.println("该用户注册："+user.toString());
}
}
json与java类相互转换的帮助类：
package com.lin.angular.util;
import net.sf.json.JSONObject;
public class JSONService {
private volatile static JSONService service;
private JSONService(){}
/**
* 这里是一个单件
* @return
*/
public static JSONService getInstance()
{
if(service == null)
{
synchronized (JSONService.class) {
if(service == null)
{
service = new JSONService();
}
}
}
return service;
}
public static Object jsonString2Object(String jsonStr,Class type)
{
if(jsonStr.indexOf("[")!=-1)
{
jsonStr.replace("[", "");
}
if(jsonStr.indexOf("]")!=-1)
{
jsonStr.replace("]", "");
}
JSONObject jsonObject =(new JSONObject()).fromObject(jsonStr);//json字符串转化成json对象
return JSONObject.toBean(jsonObject, type);//json对象转化成java类
}
public static String object2JsonString(Object object)
{
JSONObject json = JSONObject.fromObject(object);//将java对象转换为json对象
String str = json.toString();//将json对象转换为字符串
return str;
}
}
时间： 2024-10-26 19:51:32