php - 带输入字段和提交按钮的 PHP 的 Angular JS

标签 php html angularjs angularjs-ng-click

我有带有输入字段和提交按钮的用户界面,在字段中输入数字并单击提交按钮后。我希望它转到 first.php 文件,而 second.php 取决于 first.php 响应。最后我想展示 second.php 的值(value),你能帮我解决这个问题吗?

我在 PHP 中使用 AngularJS 我在一个 Controller 中创建了 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;
        })
    },
});

最佳答案

您可以通过以下方式在第一次调用的 promise 中调用您的下一个函数调用:

    //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 调用? 您可以在一次调用中同时执行服务器端操作。

希望这对你有帮助:)

关于php - 带输入字段和提交按钮的 PHP 的 Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39715432/

相关文章:

javascript - 谁能解释一下音频标签中的这段JS代码吗?

Javascript 响应式视频高度/宽度

javascript - 如何将项目从一个桶移动到另一个 - DragulaJS-Angular

javascript - 在 Internet Explorer 11 中单击链接的权限被拒绝

javascript - 通过 angularjs 动态下拉菜单

php - 如果同时更新MySQL会做什么

java - 在 android volley、php、xampp mysql 中将响应转换为 JSON ARRAY 或 OBJECT

php - 在 magento 中获取产品 ID

php - 在 _GET 中发送数组

html - CSS网格重复列自动填充和minmax不会使所有列的大小相同