Question

我正在尝试使用角度js显示从User获取的表单数据，并将数据发送到Java spring以在控制台上显示它。

是。我是Angularjs的初学者。所以想知道如何完成这项工作。

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <!-- Latest compiled JavaScript -->
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>


   <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


   <title>Insert title here</title>

  <script type="text/javascript">
    var ang= angular.module('test',[]);
  ang.controller('UserController',function ($scope, $http) {
   var user = {
        name : $scope.name,
        email : $scope.email,
        };  

$scope.createUser = function() {

    //alert("Insided...");
    $http({
        method : 'POST',
        url : 'src/com/createuser',
        data : $scope.user,
        headers : {
            'Content-Type' : 'application/x-www-form-urlencoded'
        }
    }).success(function(data){
        console.log(data);
    })
    .error(function(data){
        alert( "failure message: " + JSON.stringify({data: data}));
    });
}
 });






    </script>

   <body data-ng-app="test" data-ng-controller="UserController">
      <form  data-ng-submit="createUser()">

    <legend>Create User</legend>
    <label>Name</label> 
    <input type="text" id="name" name="name" data-ng-model="name" placeholder="User Name"> 
    <label>email</label>
    <input type="text" id="pwd" name="pwd" data-ng-model="email" placeholder="ur own pwd here">

    <button class="btn btn-primary">Register</button>

</form>

我的java代码：

 package com.userdisplay;

 import org.springframework.http.HttpStatus;
   import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
   import org.springframework.web.bind.annotation.ResponseBody;
     import org.springframework.web.bind.annotation.ResponseStatus;
     import org.springframework.web.bind.annotation.RequestParam;


     @Controller
   public class createuser {
   @RequestMapping(value="/createuser",method=RequestMethod.POST)
   public  @ResponseBody String details( @RequestParam("name") String name,
                                        @RequestParam("email") String email)
        {       
    System.out.print(name);
    return "the details are name" + name + ", email" + email+ "yes.";

 }

}

使用角度和弹簧显示表单数据

0 个答案: