Angularjs - 未发布表单发布数据？

Posted 2023-02-24

【中文标题】Angularjs - 未发布表单发布数据？

【英文标题】：Angularjs - Form Post Data Not Posted?

【发布时间】：2013-12-03 18:33:28

【问题描述】：

我必须承认我有点困惑......我以前从未这样做过，我显然错过了一些东西

当我通过 http.post 将数据传递到我的 php 文件时，我似乎无法收集数据...

谁能告诉我为什么这不起作用？

FormData 显示在控制台日志中，并且文件正在写入肯定.. 但是看起来没有数据传递..

$scope.submitForm = function() 
    formData = $scope.form;

    $http.post('form2.php', JSON.stringify(formData)).success(function()

        console.log(formData);
        //window.location.href = "form2.php?data=" + JSON.stringify(formData);

    );
;

这是在我的 php 文件中.. 尝试将数据从提交的表单写入文件...（只是测试）..

    <?php

        $file = 'form2.txt';
        $data = json_decode($_REQUEST['data'],true);

        //print( '<pre>' );
        //print_r ($data);
        //print( '</pre>' );

        $data_insert = "Name: " . $data['firstname'] .
                    ", Email: " . $data['emailaddress'] . 
                    ", Description: " . $data['textareacontent'] . 
                    ", Gender: " . $data['gender'] . 
                    ", Is Member: " . $data['member'];

        //print $data_insert;

        file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);

    ?>

【问题讨论】：

如果您查看 Chrome 控制台中的“网络”标签，您是否看到了请求？它是成功还是失败？错误代码是什么？

我得到状态码 200 OK.. 它还显示有内容长度（所以那里有一些数据）

Status 200 OK 表示请求成功并完成，服务器（您的 PHP）没有导致任何错误。你需要检查你的 PHP 代码，看看它是否因为某种原因没有写入文件。

它正在写入文件.. 它写入我硬编码的字符串...

【参考方案1】：

在做了相当多的研究之后，我发现这在某种程度上是一个特定于 php 的问题。我在这两个帖子中找到了答案。

这里： Angular HTTP post to PHP and undefined

这里： http://sebgoo.blogspot.ca/2013/05/angularjs-post-data-to-php.html

我的最终 PHP 代码如下所示..

        $file = 'form2.txt';

        $postdata = file_get_contents("php://input");
        $data = json_decode($postdata, true);


        $data_insert = "Name: " . $data['firstname'] .
                ", Email: " . $data['emailaddress'] . 
                ", Description: " . $data['textareacontent'] . 
                ", Gender: " . $data['gender'] . 
                ", Is a member: " . $data['member'];


        //print $data_insert;

        file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);

我还要感谢 Mike Brant (https://***.com/users/1529853/mike-brant)，他从引用的堆栈帖子中获得的解决方案非常有帮助。我也对他的回复投了赞成票。

我的 Angular 应用程序代码看起来像这样……感谢 artur grzesiak (https://***.com/users/2956115/artur-grzesiak)

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

app.controller('FormCtrl', function ($scope, $http) 

var formData = 
    firstname: "default",
    emailaddress: "default",
    textareacontent: "default",
    gender: "default",
    member: false
;


$scope.submitForm = function() 

    $http(

        url: "form2.php",
        data: $scope.form,
        method: 'POST',
        headers : 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'

    ).success(function(data)

        console.log("OK", data)

    ).error(function(err)"ERR", console.log(err))
;

);

最后，用于提交此表单的 HTML 表单看起来像这样......

<div ng-app="myApp">

    <form ng-controller="FormCtrl" ng-submit="submitForm()">
        First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
        Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
        Description:<br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
            <br/>
        <input type="radio" ng-model="form.gender" value="female" />Female ...
        <input type="radio" ng-model="form.gender" value="male" />Male <br/>
            <br/>
        <input type="checkbox" ng-model="form.member" />Already a member
            <br/>
        <input type="submit" ngClick="Submit" >
    </form>

</div>

感谢所有帮助过的人！

【讨论】：

.success 和 .catch 方法已被弃用并从 AngularJS 框架中删除。 Content-Type 标头错误。应该是application/json，因为后端正在解码json。

【参考方案2】：

如果你想在 php 中使用 $_POST 并且不包含 jquery 并使用像 $.param() 这样的函数，对于纯 anjularjs 你应该修改 app.js 并添加以下行：

.config( [ '$httpProvider',
function ( $httpProvider ) 
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param Object obj
     * @return String
     */
    var param = function ( obj ) 
        var query = '',
            name, value, fullSubName, subName, subValue, innerObj, i;

        for ( name in obj ) 
            value = obj[ name ];

            if ( value instanceof Array ) 
                for ( i = 0; i < value.length; ++i ) 
                    subValue = value[ i ];
                    fullSubName = name + '[' + i + ']';
                    innerObj = ;
                    innerObj[ fullSubName ] = subValue;
                    query += param( innerObj ) + '&';
                
             else if ( value instanceof Object ) 
                for ( subName in value ) 
                    subValue = value[ subName ];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = ;
                    innerObj[ fullSubName ] = subValue;
                    query += param( innerObj ) + '&';
                
             else if ( value !== undefined && value !== null )
                query += encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + '&';
        

        return query.length ? query.substr( 0, query.length - 1 ) : query;
    ;

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [
        function ( data ) 
            return angular.isObject( data ) && String( data ) !== '[object File]' ? param( data ) : data;
        
    ];
] )

【讨论】：

这看起来很有趣。我会试一试的。