Question

我无法在Spring中使用AngularJs和REST服务进行POST。

Index.HTML只是一个简单的表单，用于向Rest Services提交数据并在同一页面上打印出来。

我收到以下错误：

无法加载资源：服务器响应状态为400（错误请求）

App.js

＆＃13;

var helloApp = angular.module("SG", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',
		function($scope, $resource) {
			$scope.users = [];
			
			$scope.saveUser = function(){
				$scope.users.push({ 'name':$scope.name, 'username': $scope.username, 'size':$scope.size, 'email':$scope.email });		
				// Create a resource class object
				//
				var User = $resource('/upload');
				// Call action method (save) on the class 
				//
				User.save({name:$scope.firstname,username:$scope.username,size:$scope.size,email:$scope.email}, function(response){
					$scope.message = response.message;
				});
				
				$scope.firstname='';
				$scope.username='';
				$scope.size='';
				$scope.email='';
			}
			
		} ]);

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="SG">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src = "jquery.js"></script>
<script type="text/javascript" src = "bootstrap.min.js"></script>
<script type="text/javascript" src = "lib/angular.min.js"></script>
<script type="text/javascript" src = "lib/angular-resource.min.js"></script>
<script type="text/javascript" src = "app.js"></script>
</head>
<body ng-app = "SG" ng-controller="HttpController" >

<div class="intro-message">
<h1>First Page</h1>
<h3></h3>
<div>
<section>
<ul class = "nav nav-pills">
<li ng-class ="{active:tab ===1}"> <a href ng-click="tab =1">Submit job</a></li>
</ul>
</section>
</div>
<div class = "panel" ng-show="tab ===1">

<div class="container">
<div class="col-sm-8 col-sm-offset-2">
    
    <!-- PAGE HEADER -->
    <div class="page-header"><h1>Open Source Form Validation</h1></div>
   
    <!-- FORM -->
    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm"  ng-submit="saveUser()" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" ng-model="name" required>
            <p ng-show="userForm.name.$invalid" class="help-block">You name is required.</p>
            
        </div>

        <!-- USERNAME -->
        <div class="form-group">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
			<p ng-show="userForm.name.$invalid" class="help-block">You name is required.</p>
        </div>
        
        <!-- EMAIL -->
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="email">
            <p ng-show="userForm.email.$invalid" class="help-block">Enter a valid email.</p>
        </div>
   
            <!-- NO OF HOURS -->
        <div class="form-group">
            <label>No of Hours</label>
            <input type="number" name="size" class="form-control" ng-model="size" ng->
        </div>
     
        <!-- SUBMIT BUTTON -->
        <div class="form-group">
        <button type="submit" class="btn btn-primary" ng-disabled = "userForm.$invalid">Submit</button>
        </div>
    </form>
				
							{{$scope.message}}
						
			</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

＆＃13;

RestApiController.Java

@Controller public class RestApiController {

@RequestMapping(value="/upload", method=RequestMethod.GET)
public @ResponseBody String provideUploadInfo() {
    return "Test Get run to this URL.";
}

@RequestMapping(value="/upload", method=RequestMethod.POST)
public @ResponseBody String handleFileUpload(@RequestParam("name") String userName,
        @RequestParam("username") String jobName, @RequestParam("size") String nodes,
        @RequestParam("email") String email){
    System.out.println("hello");
    return "The company data (name: " + userName + ", employees: "+ jobName + ", headoffice: " + email + ") is saved";
}

}

Answer 1

更改您的方法签名

@RequestMapping(value="/upload",method=Request.Method.POST)
public @ResponseBody HashMap<String,String> handleFileUpload(@RequestBody HashMap<String,String> userdetails)
{
  System.out.println("User Details is : "+userdetails);
  HashMap<String,String> user = new HashMap<String,String>();
  user.put("name","example");
  return example
}

@RequestParam用于绑定url值
@RequestBody用于ajax解析请求正文

返回类型应该是JSONObject或HashMap。

Answer 2

我更改了方法签名，使其与JSON而不是字符串兼容。

@RequestMapping(value="/upload", method=RequestMethod.POST, consumes = "application/json",produces= "application/json")
public @ResponseBody DataPost handleFileUpload( @RequestBody DataPost datapost){

    System.out.println(datapost.getUsername());
    datapost.setUsername(datapost.getUsername()+"Controller");
    System.out.println("hello");
    return datapost;
}

Answer 3

检查主机如果您的项目未在服务器中运行根文件夹。使用网址添加项目名称 http://localhost:8080/ExampleProject/upload

无法使用Angular.JS

3 个答案: