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

2019年8月4日 157次阅读

我的html是这样的：

<form ng-submit="addNews(news)" ng-controller='FormController'>

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

{{todos.autor}}
{{todos}}

<span> <var>result:</var> <mark>{{result}}</mark></span>
</form>

使用ng-model指令输入(如你所见“todos.autor”)

我的控制器(FormController)是这样的：

$scope.addNews = function(news){

            $http.post('send_data.php', {'autor': $scope.todos.autor}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data;
            })

最后我的php(send_data)：

<?php
$data = json_decode(file_get_contents("php://input"));
echo $data->autor;

?>

当用户点击提交时我从我的控制器调用addNews函数,这个函数应该发送用户在输入中写入的数据,然后成功时$scope.result将包含信息,最后结果将标记在html(< mark> {{result}}< / mark>)(一个简单的例子).

问题是没有显示结果,除非我将我的ng-model从todos.autor更改为简单的autor并且在控制器中从{‘autor’：$scope.todos.autor}更改为{‘autor’：$scope.autor (我验证了这一点)我真的需要有todos.autor而不是简单的autor

如何以这种方式实现受控发送数据？谢谢

最佳答案 我认为你的问题在这里：

$http.post('send_data.php', {'autor': $scope.todos.autor})

你想传递一个带有autor属性的todos对象,是吗？那么你需要：

给输入另一个名字

<input type="text" placeholder="autor" name="autor" 
   ng-model="autorName">

在控制器中定义todos对象,然后在调用addNews函数时,将autor属性及其值赋给todos对象：

var app = angular.module('app',[])
   .controller('FormController', function($scope) {

        $scope.todos = {};

        $scope.addNews = function(news){

            // assign the autor property and give it the
            // value from the form
            $scope.todos.autor = $scope.autorName;

            console.log($scope.todos.autor);    
        }; 
    });

现在你基本上得到：

$scope.todos = { autor : autorName }

请参阅此演示 – http://jsbin.com/rotizoziro/1/edit?html,js,console,output

更新

由于上面的代码似乎有助于原始海报,我把它留在那里供参考.
但是,正如所指出的那样,我的代码可以写得更干净.
所以试着澄清一下：

我相信原始的海报问题是他们需要一个对象而不是一个简单的属性传递回服务器.

来自O.P.：
问题是没有显示结果,除非我将我的ng-model从todos.autor更改为简单的autor并且在控制器中从{‘autor’：$scope.todos.autor}更改为{‘autor’：$scope.autor (我验证了这一点)我真的需要有todos.autor而不是简单的autor

这意味着需要设置和传递一个对象,如上所述,实现这一目标的更好方法是：
保留最初的原始表格输入,即

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

内部控制器

$scope.todos = {};

$scope.addNews = function(news){

            // when this function is called $scope.todos.autor will have a value assigned 
            // from when the user filled out the input field

            // send object to backend
            $http.post('send_data.php', {'autor': $scope.todos}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data;
            }
点赞