web-dev-qa-db-ja.com

Angularjs-フォーム投稿データは投稿されていませんか？

私は少し混乱していることを認めなければなりません...私はこれまでこれをしたことがなく、明らかに何かが欠けています

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

    ?>
javascriptphpangularjs
8
GRowing

かなりの調査を行った後、これはphp固有の問題であることがわかりました。そして、これら2つの投稿でanswersaを見つけました。

ここで： 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://stackoverflow.com/users/1529853/mike-brant ）の功績も認めたいと思います。私は彼の回答に賛成票を投じました。あまりにも。

私のangularアプリコードは次のようになります...そして、artur grzesiak（ https://stackoverflow.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>

助けてくれたみんなに感謝します！

16
GRowing

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;
        }
    ];
}] )
2
PathSeeker