Angular JS with PHP with Input fields and Submit Button

Question

我有 UI 带有输入字段和提交按钮，在字段中输入数字并单击提交按钮后。我希望它转到 first.php 文件并且 second.php 取决于 first.php 响应。最后我想展示 second.php 的价值，你能帮我一下吗？

我正在使用 AngularJS 和 PHP 我正在一个控制器中创建 2 个函数，并通过单击按钮一次调用 2 个函数你能给我一些建议吗？

HTML代码

<html>
    <div ng-controller="get_controller">
        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
        <span class="input-group-btn">
              <button type="submit" ng-click="sendAccountNumber();geValues()" class="btn btn-primary">Submit</button>
        </span>
    </div>

    <div ng-controller="get_controller">
        <table>
            <tbody>
                <tr>
                    <th ng-repeat="list in personDetails">{{list.Name}}
                    </th>
                </tr>
                <tr>
                    <td class="features" ng-repeat="list in personDetails">{{list.Location}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</html>

AngularJS

   var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function($scope, $http) {

    $scope.sendAccountNumber = function() {
        var request = $http({
            method: "post",
            url: "first.php",
            data: {
                accountnumber: $scope.accountnumber
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

        });

        /* Check whether the HTTP Request is successful or not. */
        request.success(function(data) {
            console.log("Account Number " + data + " Sent to first.php");
        });
    }


    $scope.geValues = function() {
        $http({
            method: 'POST',
            url: 'second.php'
        }).success(function(data) {
            $scope.post = data;
            $scope.personDetails = Employee;
        })
    },
});

Answer 1

您可以通过以下方式在第一次调用的承诺中调用您的下一个函数调用：

    //First function
    $scope.firstFunction = function(){
        $http({
          method: 'POST',
          url: 'first.php',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: data
        }).then(
            function (response) {
                var data = response.data;
                $scope.secondFunction(data);
                // not relevant
            }, function (error) {
                var data = error.data;
                // not relevant
        });
    }
   //Second function
    $scope.secondFunction = function(data)
    {
        $http({
          method: 'POST',
          url: 'second.php',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: data
        }).then(
            function (response) {
                var newData = response.data;
                // not relevant
            }, function (error) {
                var newData = error.data;
                // not relevant
        });
    }

并且仅在单击按钮时调用一个函数 firstFunction()。

<button type="button" ng-click="firstFunction();" class="btn btn-primary">Submit</button>

仅供参考，

我建议使用 ng-submit() 事件 form 来提交表单数据，而不是通过表单的提交事件提交。
还有一件事，您为什么要请求两次 ajax 通话？您只能在一次调用中完成服务器端操作。

希望对您有所帮助:)

Angular JS with PHP with Input fields and Submit Button

Angular JS with PHP with Input field and Submit Button

php

html

angularjs

angularjs-ng-click