将Angular表单提交到一个php文件中。

12 浏览
0 Comments

将Angular表单提交到一个php文件中。

我试图将下面的表单提交到名为time.php的php文件，但是它不起作用，即使我检查控制台也没有错误，什么都没有显示出来。我不确定我可能出了什么问题。

请注意：ng-app="app"位于头部：

以下代码是控制器，我认为问题可能出在这里：

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

app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {

$scope.sendRequest = function(){

var data= {

'firstName' :$scope.firstName,

'lastName' :$scope.lastName,

'acNumber' :$scope.acNumber,

'email' :$scope.email,

'selectedRequestType' :$scope.selectedRequestType,

'selectedWorkRequestType' :$scope.selectedWorkRequestType,

'selectedOutput' :$scope.selectedOutput,

'selectedFrequency' : $scope.selectedFrequency,

'selectedWeekly' : $scope.selectedWeekly,

'selectedFile' : $scope.selectedFile,

'selectedLibrary' : $scope.selectedLibrary,

'selectedPlatformOutput' : $scope.selectedPlatformOutput,

'productName' : $scope.productName

};

$http({

url: "time.php",

method: "POST",

headers: {'Content-Type': 'application/x-www-form-urlencoded'},

data: data

}).success(function(data, status, headers, config) {

//成功代码

}).error(function(xhr) {

//失败代码

console.log(data);

console.log(xhr.responseText);

});

return false;

};

$scope.init = function (){

$scope.workRequestType = 'test';

$scope.requestTypes = [

{'type':'Work Request'},

{'type': 'Incident'}

];

$scope.workRequestTypes = [

{'type': 'Amendments to existing code'},

{'type': 'Code Automation'},

{'type': 'New file(s) from source'}

];

$scope.outputTypes = [

{'type': 'SAS'},

{'type':'SAP IQ'},

{'type': 'Hadoop'}

];

$scope.frequencies = [

{'type' : 'Daily'},

{'type': 'Monthly'},

{'type': 'Weekly'}

];

$scope.weeklies = [

{'type': 'Monday'},

{'type':'Tuesday'},

{'type': 'Wednesday'},

{'type':'Thursday'},

{'type':'Friday'},

{'type':'Saturday'},

{'type':'Sunday'}

];

$scope.files = [

{'type': 'New File(s)'},

{'type': 'Add to existing file received'}

];

$scope.libraries = [

{'type':'Yes'},

{'type':'No'}

];

$scope.platformOutputs = [

{'type': 'SAS'},

{'type':'SAP IQ'},

{'type': 'Hadoop'}

];

$scope.firstName= null;

$scope.lastName= null;

$scope.acNumber= null;

$scope.email= null;

$scope.selectedRequestType= null;

$scope.selectedWorkRequestType= null;

$scope.selectedOutput= null;

$scope.sasLibraryName = null;

$scope.sasIQtext = null;

$scope.selectedFrequency = null;

$scope.selectedWeekly = null;

$scope.selectedFile = null;

$scope.selectedLibrary = null;

$scope.selectedPlatformOutput = null;

$scope.productName = null;

};

}]);

我还在学习Angular，所以可能犯了一个简单的错误。

0

1 答案

0 Comments

问题的出现原因是，当进行HTTP POST请求时，PHP无法访问POST变量。解决方法是将数据从对象转换为字符串，并使用$httpParamSerializerJQLike服务进行序列化。

下面是一个示例代码：

$http({
    url: "time.php",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $httpParamSerializerJQLike(data),
})

其中，data应该是一个字符串，格式类似于"firstName=John&acNumber=1234"。

在控制器中，需要将$httpParamSerializerJQLike服务传递给控制器：

app.controller('testCtrl', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {

另外，可以使用Angular的$httpParamSerializer来替代手动编码，效果更好。

如果在控制台上没有看到任何输出，可能是因为成功回调函数中没有打印输出。可以在网络选项卡中检查是否有HTTP请求被发送。

关于将当前页面重定向到“成功页面”，可以在success回调函数中使用Angular的$location服务来实现，例如：$location.path('/successpage')。

0