文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将表单数据从角传递到php文件。

问将表单数据从角传递到php文件。
EN

Stack Overflow用户
提问于 2016-09-21 11:17:57
回答 1查看 3.1K关注 0票数 3

不熟悉角度可能会很痛苦。我正在尝试从一个角度的表单获取信息到一个php文件。

下面是HTML表单：

代码语言：javascript
复制
<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>

以下代码是控制器：

代码语言：javascript
复制
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

    };
};




 });

下面是关于time.php的

代码语言：javascript
复制
      $data = file_get_contents("php://input");
    $request = json_decode($data);
   var_dump($request);

var_dump输出为NULL。我对棱角很陌生，不知道我在哪里漏掉了重点。请协助

javascript
php
angularjs
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-21 11:23:25

使用$http向/从服务器获取/发送数据。

在角模块中添加$http依赖项

代码语言：javascript
复制
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指令。

PHP包装器

代码语言：javascript
复制
$data = json_decode(file_get_contents("php://input"));
var_dump($data);

建议练习

要从表单中获取多个值，您可以创建一个对象作为作用域变量，并将该对象传递给服务器，而不是声明和设置/获取控制器中的所有值。

代码语言：javascript
复制
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
<input type="text" ng-model="user.email" />

您可以直接访问控制器中的数据，如下所示

代码语言：javascript
复制
$scope.user //That will have all the three defined values of ng-model

更多帮助这里

编辑:纠正问题并创建工作示例

您的代码有几个问题，试着按照下面的方式。

  • 您没有在HTML中定义ng-app
  • ng-submit() = "sendRequest()"应该是ng-submit="sendRequest()"
  • 无需在表单中应用操作，因为您将使用$http传递表单数据。
  • 您的代码有Error: ngModel:nonassign Non-Assignable Expression，因为其中一个输入是ng模型的空白ng-model=""而不是ng-model="hadoop"。

见工作片段，有控制台表单数据成功。

​

代码语言：javascript
复制
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;
    };
}]);
代码语言：javascript
复制
<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, 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="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>

​

现在，您的角有表单数据，您只需要发送这些数据到服务器(PHP)使用$http，把这段代码放在您的sendRequest函数，我已经控制台数据。

代码语言：javascript
复制
$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
});

最后，在timer php文件中获取数据。

代码语言：javascript
复制
<?php
  $data = json_decode(file_get_contents("php://input"));
  print_r($data->firstName);
  exit;
?>

希望这肯定对你有帮助:)

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39615073

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档