我有一个使用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";
?>
我对角度很新,但显然需要一些帮助:-)任何人都能指出我正确的方向吗?
提前致谢。
答案 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}}