如何从angularjs向服务器发送数据答案

【问题标题】：How to send data to server from angularjs如何从angularjs向服务器发送数据
【发布时间】：2015-09-08 09:57:48
【问题描述】：

我正在尝试使用 $http.post() 将数据发送到服务器。我写了一些代码，但它什么也没显示。我只想发送一个字符串变量并从 java 页面打印它。

<body ng-controller="HelloCtrl">    
 <script type="text/javascript">
    var app=angular.module("MyApp",[]);
    app.controller("HelloCtrl", function($scope, $http) {   
        $scope.name="Subhajyoti";           
        $scope.showName= function(){
            $http.post('insertEntry',$scope.name)
            .success(function(data){
                alert(data);
            })
            .error(function(data){
                alert("Error");
            })
        }
    });
 </script>
</body>

这是我的 java 页面代码..

@Controller
public class Rules {
@RequestMapping(value="insertEntry", method=RequestMethod.POST)
public @ResponseBody String insertEntry(@RequestParam String name){
    String val=name;
    System.out.println(val);
    JSONObject json = new JSONObject();
    String message = "Success";

    json.put("message", message);
    return json.toString();
}

}

我正在与 spring mvc 交互 angularjs。请帮我举个例子。我是新手。

【问题讨论】：

确保把 url 不仅仅是 insertEntry
您使用的是什么 angularJS 版本？ .success 和 .error 已弃用。
请帮我编写java页面编码。

标签： java ajax angularjs spring

【解决方案1】：

试试

@RequestMapping(value="/insertEntry")

还有

$http.post('/insertEntry')

勾选一个tutorial

【讨论】：

【解决方案2】：

你需要这个：

   <html>
<head>
     <script type="text/javascript">
        var app=angular.module("MyApp",[]);
        app.controller("HelloCtrl", function($scope, $http) {   
            $scope.name="Subhajyoti";           
               $http.post('/insertEntry', {name:$scope.name}).
          then(function(response) {
            // this callback will be called asynchronously
            // when the response is available
          }, function(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
          }); 
        });
     </script>
</head>
<body >  
 <div data-ng-app="MyApp"
        ng-controller="HelloCtrl">

    </body>
</html>

并修改您的Controller 类如下：

@Controller
public class Rules {
@RequestMapping(value="insertEntry", method=RequestMethod.POST)
public @ResponseBody String insertEntry(@RequestBody String name){
    String val=name;
    System.out.println(val);
    JSONObject json = new JSONObject();
    String message = "Success";

    json.put("message", message);
    return "".toString();
  }
}

【讨论】：

不确定，您之前是如何调用 `$scope.showName`，现在按照答案中的说明尝试！
我只是和你说的@Arpit一样。
如果我只是调用 http.post 并使用这样的 java 页面。够了吗？我的意思是他们将如何互动？程序计数器是否会转到那个 java 函数？

【解决方案3】：

这是我调用服务器的代码。 var app = angular.module('MyApp', []);

    app.controller("JsonCtrl", function($scope, $http) {

        var dataObj = {
                "ruleId" : "1234",
                "version" : "R1234",
                "name" : "Usage crossing 50MB",
                "description" : "Find usage more than 50mb",
                "active" : true,
                "created_by" : "Rahul",
                "create_date" : "2015-08-18",
                "modified_date" : "2015-08-22",
                "modified_by" : "Subho"
            };

        var response = $http.post('PostService', dataObj);
        response.success(function(data, status, headers, config) {
            $scope.responseData = data;
        });
        response.error(function(data, status, headers, config) {
            alert("Exception details: " + JSON.stringify({
                data : data
            }));
        });

    });

服务器页面代码：

 @Controller
  public class JsonServer {
@RequestMapping(value = "/PostService", method = RequestMethod.POST)
 public @ResponseBody String PostService(@RequestBody RuleModel m) {

    StringBuilder reponseData = new StringBuilder();
    reponseData.append("RuleID: "+m.getRuleId()+" ");
    reponseData.append("version: "+m.getVersion()+" ");
    reponseData.append("name: "+m.getName()+" ");
    reponseData.append("description: "+m.getDescription()+" ");
    reponseData.append("created_by: "+m.getCreated_by()+" ");
    reponseData.append("create_date: "+m.getCreate_date()+" ");
    reponseData.append("modified_date: "+m.getModified_date()+" ");
    reponseData.append("modified_by: "+m.getModified_by()+" ");
    reponseData.append("category_name: "+m.getCategory_name()+" ");

    return reponseData.toString();
}
}

【讨论】：