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帖子问题上有几个好的主题，例如看看以下帖子：How do I POST urlencoded form data with $http in AngularJS?或者这个：How can I post data as form data instead of a request payload?

注意：您需要在本地使用Web服务器运行此操作。下面的代码对我来说是“好的”，我做了以下：

下载您提供的代码
将所有这些内容保存在本地目录中
启动了内置于web服务器php -S 0.0.0.0:8181的php，访问了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的Angular doc和 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

PHP没有响应Angularjs请求

1 个答案: