Angular JS如何将数据发送至后台 java 类

最新推荐文章于 2022-07-16 12:17:22 发布

weixin_34088583

最新推荐文章于 2022-07-16 12:17:22 发布

阅读量283

点赞数

文章标签： java javascript 后端 ViewUI

原文链接：https://my.oschina.net/ChiLin/blog/518282

版权

为什么80%的码农都做不了架构师？>>>

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>&nbsp;&nbsp;<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;
    }

}

转载于:https://my.oschina.net/ChiLin/blog/518282