PHP没有响应Angularjs请求

Question

我有一个带有一些angularjs验证的Raw表单,

<form name = "sform" novalidate="true">
<table border="0">
    <tr>
        <td>
            First name:
        </td>
        <td>
            <input type="text" name="fname" ng-model="fname" placeholder="First Name" required="true" ng-pattern="/^[A-Za-z]*$/">
        </td>
        <td ng-show="sform.fname.$invalid && !sform.fname.$pristine"  class="help-block">wrong name </td>
    </tr>

    <tr>
        <td>
            Last Name:
        </td>
        <td>
            <input type="text" ng-model="lname" placeholder="last Name" required="true" ng-pattern="/^[A-Za-z]*$/">
        </td>
        <td ng-show= "sform.lname.$invalid && !sform.lname.$pristine"  class="help-block">wrong Last name </td>
    </tr>
    <tr>
        <td>
            Email:
        </td>
        <td>
            <input type="email" ng-model="email" placeholder="email" required="true">
        </td>
        <td ng-show="sform.email.$invalid && !sform.email.$pristine"  class="help-block">wrong Email </td>
    </tr>
    <tr>
        <td>
            <button type="submit" ng-disabled="sform.$invalid" ng-click = "submitForm()">Submit</button>
        </td>
    </tr>       
</table>
</form>

相关的.js文件是

far_app.js

var farLogin = angular.module('far_login',[]);

far_formcontroler.js

farLogin.controller('far_formcontrol',['$scope','$http',function($scope,$http) {
    $scope.url='http://localhost/far_submit.php';
     var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

        // function to submit the form after all validation has occurred            
        $scope.submitForm = function() {
            alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); 
            // check to make sure the form is completely valid
            if ($scope.sform.$valid) {
                $http.post($scope.url,{"name": $scope.fname, "email": $scope.email, "lname": $scope.lname},config).
                 success(function() {
                            alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); 
                        })

            }
            else
            {
                alert('our form is not amazing');   
            }

        }

    }]);

我的php文件是

<?php
header("Access-Control-Allow-Origin: *");
?>
<script type="text/javascript"> alert("this is php")</script>
<?php
?>

但是php脚本根本没有执行,并且它们在浏览器的控制台中没有错误.

我哪里错了？

谢谢.

Answer 1

在SO本身的Angular $ http帖子问题上有几个好的线程,例如看看以下线程:如何在AngularJS中用$ http发布urlencoded表单数据？或者这一个:我如何将数据作为表单数据而不是请求有效负载发布？

注意:您需要在本地使用Web服务器运行此操作.下面的代码对我来说是"好的",我做了如下:

• 下载您提供的代码
• 将所有这些保存在本地目录中
• 启动php内置的web服务器php -S 0.0.0.0:8181,访问index.html:http:// localhost:8181 /提交表单,它返回给我一个json响应:{"status":"OK","data":{"userid":null}}

Pastebin:far_app.js,index.html,far_login.php

我使用PHP内置服务器仅用于测试目的,但是,我强烈建议您在Windows上使用像Wampp或Xampp之类的东西来运行它.您也可以手动配置Apache/PHP/Mysql,但是,Wampp/Xampp非常易于安装和使用.

我重新构建了一些代码,如下所示:

    angular.module('far_login',[])
.controller('far_formcontrol',['$scope','$http', function($scope, $http) {
    // function to submit the form after all validation has occurred            
    $scope.submitForm = function() {
        console.log('First Name : ' , $scope.fname);
        console.log('Email : ' , $scope.email);
        console.log('Last Name: ', $scope.lname); 
        // check to make sure the form is completely valid
        if ($scope.sform.$valid) {
            $http({
                url: 'http://localhost:8181/far_submit.php',
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function(obj) {
                    var str = [];
                    for(var p in obj)
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    return str.join("&");
                },
                data: {"name": $scope.fname, "email": $scope.email, "lname": $scope.lname}
            })
            .then(function(response) {
                console.log(response)
            })
            .catch(function  (error) {
                console.log(error);
            });

        } else {
            alert('our form is not amazing');   
        }
    };
}]);

这是基于Plunker从 角文档,以及 far_submit.php文件,如:

<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');

$data = [ 'status' => 'OK', 'data' => [ 'userid' => $autogeneratedUserId] ];
echo json_encode($data);

确保可以从http://localhost/far_submit.php访问far_submit.php