Question

我正在尝试使用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的新手，正在寻找一些建设性的反馈，以便在我深入了解文档以获得答案之前，我知道该寻找什么。

yelp请...

修改

以下是控制台的屏幕截图：

Answer 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);

Answer 2

您可以使用浏览器检查器或检查标题来检查发布的内容。我认为你的语法不正确。请参阅此处的文档：syntax $ http＃post

看起来你没有将任何数据传递给表单，因为第一个右括号位于错误的位置。 e.g。

RewriteEngine on

RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(?!http/).*\.php$ /http%{REQUEST_URI} [R=301,L,NE,NC]

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

yelp请...

2 个答案: