AngularJS - 将表单数据发送到服务器答案

【问题标题】：AngularJS - sending form data to serverAngularJS - 将表单数据发送到服务器
【发布时间】：2016-07-07 22:41:48
【问题描述】：

我正在尝试创建一个带有 2 个输入字段和一个提交按钮的简单表单。第一个字段是用于选择Category 的简单下拉列表，另一个是具有自动完成功能的标签输入字段。这是 Angular 代码：

        var app = angular.module('plunker', ['ngTagsInput']);

        app.controller('MainCtrl', function($scope, tags) {      
                $scope.categories = [
                    {"value":0, "categoryname":"standard"},
                    {"value":1, "categoryname":"premium"},
                    {"value":2, "categoryname":"gold"}
                ];

                $scope.loadTags = function(query) {
                return tags.load(query);
              }

              $scope.submitData = function(){
                $scope.form = [];
                $scope.form[0] = $scope.category;  
                $scope.form[1] = $scope.tags;
                $http.post('ServerController.php', $scope.form, {'Content-Type': 'application/json'}).
                    success(function(data, status) {
                        $scope.status = status;
                        $scope.data = data;
                        $scope.result = data;
                   })
                    .error(function (data, status, header) {
                    $scope.ResponseDetails = "Data: " + data +
                        "<hr />status: " + status +
                        "<hr />headers: " + header;
                   });
                }   
            });

            app.service('tags', function($q, $http, $filter) {
                this.load = function(query) {
                    return $http.get('tags.json').then(
                         function(result) {
                             return $filter('filter')(result.data, query)
                         }
                    )};
            });

HTML：

<body ng-app="plunker">    
    <form ng-controller="MainCtrl">
        <label><b>Category:</b></label>
        <select ng-model="category" ng-options="x.categoryname for x in categories track by x.value">
            <option value="">Choose a Category</option>
        </select>
        <p>Model: {{category}}</p>
        </br></br>
        <label><b>Tags:</b></label>
        <tags-input ng-model="tags" add-on-paste="true" display-property="tagname" placeholder="Add a Tag" add-from-autocomplete-only="true">
            <auto-complete max-results-to-show="4" min-length="2" source="loadTags($query)"></auto-complete>
        </tags-input>
        <p>Model: {{tags}}</p>
        <input ng-click="submitData()" type="submit" value="Submit"></input>
        <p>Submit result: {{result}}</p>
    </form>
</body>

这是服务器代码：

$form_data = json_decode(file_get_contents('php://input'), true);
var_dump($form_data);
exit;

这里是 tags.json：

[{"id":"1","tagname":"wifi"},{"id":"2","tagname":"cable"},{"id":"3","tagname":"television"},{"id":"4","tagname":"geyser"},{"id":"5","tagname":"fridge"},{"id":"6","tagname":"sofa"},{"id":"7","tagname":"lift"},{"id":"8","tagname":"gas stove"},{"id":"9","tagname":"washing machine"},{"id":"10","tagname":"winston"},{"id":"11","tagname":"west"},{"id":"12","tagname":"owl"},{"id":"13","tagname":"tv"}]

除了提交部分 xD 外，一切正常。当我 var_dump http 响应时，即。 $form_data 我得到空值。

嗯，我是 AngularJS 的新手，正在寻找一些建设性的反馈，以便在我深入研究文档以寻求答案之前知道要寻找什么。

请叫..

编辑：

这是控制台的屏幕截图：

【问题讨论】：

标签： angularjs forms

【解决方案1】：

在发送请求之前尝试将您的 json 转换为字符串

var jsonString = JSON.stringify($scope.form);

$http({
    method : "POST",
    url : "ServerController.php",
    data : jsonString
}).then(function(response){
  $scope.status = response.status;
  $scope.data = response.data;
  $scope.result = response.data;
},function(response){
//error
})


$jsonString = file_get_contents('php://input');
$form_data = json_decode($jsonString, true);;
var_dump($form_data);

【讨论】：

感谢您的意见。但它仍然给出 null
你试过没有内容类型标题
你检查过服务中是否引发了跨域标志
好的。我不确定我是否完全明白。但是，如果有任何帮助，该服务将完美运行。它在自动完成建议下拉列表中加载 tags.json 中可用的标签。问题在于 submitData()
还有一件事，我实际上是在服务器端使用 symfony2，所以 tags.json 并不是一个真正的文件。相反，它是我从 ServerController.php 内部从服务器发送的响应。所以在javascript代码中我实际上是$http.post(Routing.generate('my_route_to_submit'), jsonString)。就像我在服务 return $http.get(Routing.generate('my_route_to_json_data')) 中使用 $http.get 一样，效果很好。

【解决方案2】：

您可以使用浏览器检查器或检查标题来检查发布的内容。我认为您的语法不正确。在此处查看文档：https://docs.angularjs.org/api/ng/service/$http#post

您似乎没有将任何数据传递给表单，因为第一个右括号位于错误的位置。例如

 $http.post('ServerController.php',data,config)

【讨论】：

我确实注意到并更正了它，但似乎不是问题
console.log 'form' 或 $scope.form 看看里面有什么。
它是一个以类别和标签为元素的数组。
我添加了控制台的屏幕截图。