提交表单存储JSON数据但从不转到php脚本:

时间:2017-10-01 17:25:10

标签: angularjs json

我有一个使用angular进行验证等的html表单,我将数据存储在JSON对象中,并希望将其发布到我的php邮件程序脚本中,但是在提交表单时它没有取得最大的成功200状态消息并存储JSON数据但是永远不会转到php脚本:

html代码段:               名字(必填)          名字是必需的。      

<div class="form-group" ng-class="{ 'has-error' : contactForm.lastName.$invalid && !contactForm.lastName.$pristine }">
<label for="lastName">Last Name <span style="color:red;">(required)</span></label>
<input type="text" class="form-control" id="lastName" ng-model="user.lastName" placeholder="Last Name" required>
<span ng-show="contactForm.lastName.$invalid && !contactForm.lastName.$pristine" class="help-block">Last name is required.</span>


    提交我的详细信息

JS:

var validationApp=angular.module('validationApp',[]);
validationApp.controller('mainController', function($scope, $http, $window){        
$scope.submitForm=function(isValid){
    if(isValid){ 
      var grabUserData = {};
        grabUserData = JSON.stringify($scope.user);
        var currentUrl = window.location.href;
        var trimedlocation = currentUrl.substring(0, currentUrl.length-17);

            $http({
                method: 'POST',
                url: trimedlocation + 'test.php',
                data : $.param({'data' : grabUserData }),
                headers : {
                    'Content-Type':'application/x-www-form-urlencoded'
                }
            }).then(function (response) {
                $scope.userData = response.data;
                console.log("OK", response);
            }, function (response) {
               console.log(response.data, response.status); 
            });        
        }
    }
});

PHP:     

@$firstName = $request->firstName;
@$lastName = $request->lastName

echo "Form submitted \n\n********************************";
echo "Name: " +$firstName + " " + $lastName + "\n";
?>

我对角度很新,但显然需要一些帮助:-)任何人都能指出我正确的方向吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

您可能需要做的就是将params更改为使用data而不是$scope.user。如果您这样做,则应该能够将params直接传递给php -S localhost:8000 -t ./

为了测试我的理论,我在下面写了一个简单的例子。

我写了一个类似于你发布的完整端点。我通过在命令行键入<?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow- Headers, Authorization, X-Requested-With"); header("HTTP/ 201 Created", true, 201); $firstName = array_values($_REQUEST)[0]; $lastName = array_values($_REQUEST)[1]; echo "Name: $firstName $lastName"; 从本地PHP服务器运行端点。

<强> PHP

<form id="contactForm" data-ng-submit="page.submitForm()">
<div class="form-group" ng-class="{ 'has-error' : contactForm.lastName.$invalid && !contactForm.lastName.$pristine }">
<label for="lastName">Last Name <span style="color:red;">(required)</span></label>
<input type="text" class="form-control" id="lastName" ng-model="user.lastName" placeholder="Last Name" required>
<span ng-show="contactForm.lastName.$invalid && !contactForm.lastName.$pristine" class="help-block">Last name is required.</span>
<input type="submit" value="submit"/>
</form>

我没有修改您的HTML。

<强> HTML

params

悬停,我对Javascript做了一些更改。我使用了自己的服务器网址,然后将请求更改为使用data而不是$scope.user。我将params数据变量直接传递给var validationApp = angular.module('validationApp', []) validationApp.controller('mainController', function ($scope, $http) { self.submitForm = function() { $http({ method: 'POST', url: "http://localhost:8000/test.php", headers: { "Content-Type": "application/x-www-form-urlencoded" }, params : $scope.user }).then(function (response) { $scope.userData = response.data; console.log("OK", response); }, function (response) { console.log(response.data, response.status); }); }; }); 属性。

<强> JS

Foo

我分别在Bar{ data: "Name: Foo Bar", status: 201, config: {…}, statusText: "Created", headers: ƒ } 输入了名字和姓氏字段。这导致服务器发出以下响应。

{{1}}