將表單數據從angular傳遞到php文件
[英]Pass form data from angular to a php file
問題描述
成為Angular的新手可能會很痛苦。 我正在嘗試從角形式獲取信息到php文件。
以下是HTML表單：
<form ng-submit() = "sendRequest()" ng-controller="testCtrl" class="customform" action="time.php" data-ng-init="init()">
<div class="s-10 1-10"><input ng-model="firstName" pattern=".{2,100}" title="2 to 100 Characters" placeholder="First Name" type="text" required /></div>
<div class="s-10 1-10"><input ng-model="lastName" pattern=".{5,255}" title="5 to 255 Characters" placeholder="Last Name" type="text" required /></div>
<div class="s-12 l-10"><input ng-model="acNumber" placeholder="A/C Number" title="Employee Number, i.e c1234567" type="text" required /></div>
<div class="s-12 l-10"><input ng-model="email" placeholder="Email" title="Email" type="email" required /></div>
<div class="s-12 l-10">
<select ng-model="selectedRequestType" ng-options="requestType as requestType.type for requestType in requestTypes">
<option value="" disabled selected>Request Type</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedWorkRequestType" ng-options="workRequestType as workRequestType.type for workRequestType in workRequestTypes">
<option value="" disabled selected>Work Request Type</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedFile" ng-options="file as file.type for file in files">
<option value="" disabled selected>Files</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedLibrary" ng-options="library as library.type for library in libraries">
<option value="" disabled selected>Does Library Exist</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'Code Automation' || selectedWorkRequestType.type == 'Amendments to existing code'" ng-model="selectedOutput" ng-options="outputType as outputType.type for outputType in outputTypes">
<option value="" disabled selected>Output</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedLibrary.type == 'Yes' || selectedRequestType.type == 'Incident'" ng-model="selectedPlatformOutput" ng-options="platformOutput as platformOutput.type for platformOutput in platformOutputs">
<option value="" disabled selected>Platform Output</option>
</select>
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'SAS' || selectedPlatformOutput.type =='SAS'" ng-model="sasLibraryName" type="text" placeholder="SAS Library Name: SPDS Exploit" />
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'SAP IQ' || selectedPlatformOutput.type =='SAP IQ'" ng-model="sapIQtext" placeholder="SAP IQ" >
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'Hadoop' || selectedPlatformOutput.type =='Hadoop'" placeholder="Library Name: HDFS_Exploit" ng-model="" />
</div>
<div class="s-12 l-10">
<input ng-show="selectedWorkRequestType.type == 'Amendments to existing code'" placeholder="Output Dataset Name" ng-model="outputDataset" type="text"/>
</div>
<div class="s-12 l-10">
<input ng-show="selectedLibrary.type == 'No'" type="text" ng-model="productName" Placeholder="Product Name" />
</div>
<div class="s-12 l-10">
<input ng-show="" placeholder="Upload Text File" type="file" ng-model="uploadTextFile" title="Please upload a txt file with the layout - to " multiple />
</div>
<div class="s-12 l-10">
<input ng-show="selectedRequestType.type == 'Incident'" type="text" ng-model="tableName" placeholder="Dataset/Table Name" />
</div>
<div class="s-12 l-10">
<textarea placeholder="Special Instructions" ng-model="specialInstruction" rows="5"></textarea>
</div>
<div class="s-12 l-10">
<input ng-show="selectedRequestType.type == 'Incident'" ng-model="uploadScreenshot" placeholder="Upload Screenshot of error" type="file" multiple/>
</div>
<div class="s-12 l-10">
<select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedFrequency" ng-options ="frequency as frequency.type for frequency in frequencies">
<option value="" disabled selected>Frequency</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedFrequency.type == 'Weekly'" ng-model="selectedWeekly" ng-options ="weekly as weekly.type for weekly in weeklies">
<option value="" disabled selected>Weekly Frequency</option>
</select>
</div>
<input type="hidden" ng-model="token" value="<?php echo Token::generate();?>">
<div class="s-4"><button type="submit" id="submit" class="btn-custom btn btn-large btn-block">Request</button></div>
</form>
以下代碼是控制器：
var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
$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;
};
$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
};
};
});
以下是on time.php
$data = file_get_contents("php://input");
$request = json_decode($data);
var_dump($request);
var_dump輸出為NULL。 我對角度很新，不知道我在哪里錯過了這一點。 請協助
1 個解決方案
解決方案1
2 已采納 2016-09-21 11:23:25
使用$ http從/向服務器獲取/發送數據。
在Angular模塊中添加$ http依賴項
var app = angular.module('app', []);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$http({
url: "process.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).success(function(data, status, headers, config) {
}).error(function(data, status, headers, config) {
});
}]);
服務器端
php://input允許您讀取原始POST數據。
它是$ HTTP_RAW_POST_DATA的內存密集型替代品，不需要任何特殊的php.ini指令。
$data = json_decode(file_get_contents("php://input"));
var_dump($data);
建議的做法
要從表單獲取多個值，您可以創建一個對象作為范圍變量，然后將該對象傳遞給服務器，而不是聲明並設置/獲取控制器中的所有值。
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
<input type="text" ng-model="user.email" />
您可以直接訪問控制器中的數據，如下所示
$scope.user //That will have all the three defined values of ng-model
這里有更多幫助
編輯：糾正問題並創建工作示例
您的代碼幾乎沒有問題，請嘗試以下方式。
HTML
- 您沒有在HTML中定義
ng-app -
ng-submit() = "sendRequest()"應為ng-submit="sendRequest()" - 無需在表單中應用操作，因為您將使用
$http傳遞表單數據 - 您的代碼出現
Error: ngModel:nonassign Non-Assignable Expression因為其中一個輸入有ng-model空白ng-model=""而不是ng-model="hadoop"
查看工作代碼段，控制台表單數據是否成功。
var app = angular.module('app', []); app.controller('testCtrl', ['$scope', '$http', function($scope, $http) { $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; }; $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 }; console.log(data);return false; }; }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app"> <form ng-submit="sendRequest()" ng-controller="testCtrl" class="customform" data-ng-init="init()"> <div class="s-10 1-10"> <input ng-model="firstName" pattern=".{2,100}" title="2 to 100 Characters" placeholder="First Name" type="text" required /> </div> <div class="s-10 1-10"> <input ng-model="lastName" pattern=".{5,255}" title="5 to 255 Characters" placeholder="Last Name" type="text" required /> </div> <div class="s-12 l-10"><input ng-model="acNumber" placeholder="A/C Number" title="Employee Number, ie c1234567" type="text" required /></div> <div class="s-12 l-10"><input ng-model="email" placeholder="Email" title="Email" type="email" required /></div> <div class="s-12 l-10"> <select ng-model="selectedRequestType" ng-options="requestType as requestType.type for requestType in requestTypes"> <option value="" disabled selected>Request Type</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedWorkRequestType" ng-options="workRequestType as workRequestType.type for workRequestType in workRequestTypes"> <option value="" disabled selected>Work Request Type</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedFile" ng-options="file as file.type for file in files"> <option value="" disabled selected>Files</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedLibrary" ng-options="library as library.type for library in libraries"> <option value="" disabled selected>Does Library Exist</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedWorkRequestType.type == 'Code Automation' || selectedWorkRequestType.type == 'Amendments to existing code'" ng-model="selectedOutput" ng-options="outputType as outputType.type for outputType in outputTypes"> <option value="" disabled selected>Output</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedLibrary.type == 'Yes' || selectedRequestType.type == 'Incident'" ng-model="selectedPlatformOutput" ng-options="platformOutput as platformOutput.type for platformOutput in platformOutputs"> <option value="" disabled selected>Platform Output</option> </select> </div> <div class="s-12 l-10"> <input ng-show="selectedOutput.type == 'SAS' || selectedPlatformOutput.type =='SAS'" ng-model="sasLibraryName" type="text" placeholder="SAS Library Name: SPDS Exploit" /> </div> <div class="s-12 l-10"> <input ng-show="selectedOutput.type == 'SAP IQ' || selectedPlatformOutput.type =='SAP IQ'" ng-model="sapIQtext" placeholder="SAP IQ" > </div> <div class="s-12 l-10"> <input ng-show="selectedOutput.type == 'Hadoop' || selectedPlatformOutput.type =='Hadoop'" placeholder="Library Name: HDFS_Exploit" ng-model="hadoop" /> </div> <div class="s-12 l-10"> <input ng-show="selectedWorkRequestType.type == 'Amendments to existing code'" placeholder="Output Dataset Name" ng-model="outputDataset" type="text"/> </div> <div class="s-12 l-10"> <input ng-show="selectedLibrary.type == 'No'" type="text" ng-model="productName" Placeholder="Product Name" /> </div> <div class="s-12 l-10"> <input ng-show="" placeholder="Upload Text File" type="file" ng-model="uploadTextFile" title="Please upload a txt file with the layout - to " multiple /> </div> <div class="s-12 l-10"> <input ng-show="selectedRequestType.type == 'Incident'" type="text" ng-model="tableName" placeholder="Dataset/Table Name" /> </div> <div class="s-12 l-10"> <textarea placeholder="Special Instructions" ng-model="specialInstruction" rows="5"></textarea> </div> <div class="s-12 l-10"> <input ng-show="selectedRequestType.type == 'Incident'" ng-model="uploadScreenshot" placeholder="Upload Screenshot of error" type="file" multiple/> </div> <div class="s-12 l-10"> <select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedFrequency" ng-options ="frequency as frequency.type for frequency in frequencies"> <option value="" disabled selected>Frequency</option> </select> </div> <div class="s-12 l-10"> <select ng-show="selectedFrequency.type == 'Weekly'" ng-model="selectedWeekly" ng-options ="weekly as weekly.type for weekly in weeklies"> <option value="" disabled selected>Weekly Frequency</option> </select> </div> <input type="hidden" ng-model="token" value="12"> <div class="s-4"><button type="submit" id="submit" class="btn-custom btn btn-large btn-block">Request</button></div> </form> </body>
現在你的angular有表單數據，你只需要使用$http將這些數據發送到服務器（PHP），把這個代碼放在你的sendRequest函數中，我在那里控制數據。
$http({
url: "time.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).success(function(data, status, headers, config) {
//Success code
}).error(function(data, status, headers, config) {
//Failure code
});
最后，在你的計時器php文件中獲取數據。
<?php
$data = json_decode(file_get_contents("php://input"));
print_r($data->firstName);
exit;
?>
希望這肯定會幫助你:)
將數據數組從表單傳遞到Ajax，傳遞到PHP發布文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.