PHP Angularjs 请求没有响应

标签: PHP AngularJS
发布时间: 2017/4/16 2:16:38
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一些 angularjs 验证,原始窗体

<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 脚本时,在浏览器的控制台中有没有错误。

我哪里错了?

谢谢。

解决方法 1:

有夫妇好螺纹角 $http 邮政问题本身,例如看一看下面的线程︰如何实现邮政 urlencoded 表单数据与在 AngularJS $http?或此一︰如何发布数据作为表单数据而不是请求负载?

注︰你需要运行这个本地使用的 web 服务器。下面的代码为我工作"OK",我做了以下︰

  • 下载您所提供的代码
  • 全部保存在本地目录中
  • 开始建在 web 服务器的 php php -S 0.0.0.0:8181 ,访问在 index.html: http://localhost:8181 /提交窗体并返回我 json 响应︰{"status":"OK","data":{"userid":null}}

Pastebin: far_app.jsindex.html far_login.php

我使用 PHP 建在服务器只是为了测试的目的,但是,我强烈推荐你使用一些像wampp,并提出Xampp在 Windows 上运行这。您可以手动配置您 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');   
        }
    };
}]);

这基于从角 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);

请确保far_submit.php是在http://localhost/far_submit.php访问

官方微信
官方QQ群
31647020