無法使用Angular.JS執行POST Rest服務

我無法在Spring中使用AngularJs和REST服務進行POST。無法使用Angular.JS執行POST Rest服務

Index.HTML只是一個簡單的表單，用於將數據提交到Rest Services並在同一頁面上打印出來。

我收到以下錯誤：

無法加載資源：服務器400（錯誤請求）的狀態

App.js迴應

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

<!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"> 
 
\t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t \t \t \t \t {{$scope.message}} 
 
\t \t \t \t \t \t 
 
\t \t \t </div><!-- col-sm-8 --> 
 
</div><!-- /container --> 
 
</body> 
 
</html>

RestApiController.Java

@Controller 公共類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"; 
} 

}

來源

2016-02-23 Arpit Agarwal

如果您在Web開發人員工具中檢查什麼是請求方法失敗？它是GET POST還是OPTIONS？ – maurycy

我改變了我的方法簽名，使它與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; 
}

來源

2016-02-24 20:18:33

-1

檢查主機如果您的項目不是在服務器的根目錄文件夾中運行。添加您的項目名稱與網址。
http://localhost:8080/ExampleProject/upload

來源

2016-02-23 09:52:49

變化的方法簽名

@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中結合。

來源

2016-02-23 10:38:06

無法使用Angular.JS執行POST Rest服務

回答

相關問題