个人中心
gpt4 book ai didi

javascript - 将数据从 PHP(mysql) 传递到 AngularJS 时没有数据

转载 作者：行者123 更新时间：2023-11-28 23:25:43 24 4
gpt4 key购买 nike

我对 AngularJS 和 php 有疑问。不幸的是我的 table (见下文)是空的。但是当我尝试在我的(第一个)angularJS 站点中加载数据时，我没有得到任何数据。这是我的代码:

    <!DOCTYPE html>
        <html ng-app="employeesApp">
        <head>
        ....
        </head>
        <body ng-controller="employeesCtrl">
        ...
        <h2>employees</h2>
            <table class="table table-striped table-condensed" >
                <th></th>
                <th>emp_no</th>
                <th>birth_date</th>
                <th>first_name</th>
                <th>last_name</th>
                <th>gender</th>
                <th>hire_date</th>
                <tr  ng-repeat="row in employees">
                    <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i></td>
                    <td>{{ row.emp_no}}</td>
                    <td>{{ row.birth_date}}</td>
                    <td>{{ row.first_name}}</td>
                    <td>{{ row.last_name}}</td>
                    <td>{{ row.gender}}</td>
                    <td>{{ row.hire_date}}</td>
                    </tr>
                </table>
        ...
        <!-- JS -->
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript" src="../js/angular-sanitize.min.js">
</script>
...
        <script>
        angular.module("employeesApp", [])
        .controller('employeesCtrl', function ($scope, $http) { 

            $scope.employees = [];
            $scope.tempEmployeesData = {};

            $scope.getEmployeesRecords = function(){
                $http.get('employees.php?get_simple_list_employees', {
                    params:{
                        'limit':'1000'
                    }
                }).success(function(response){
                        $scope.employees = response.records;
                });
            };
        });
        </script>
        </body>
        </html>

我认为这与我如何在 AngularJS 中传递参数有关，但我没有找到任何解决方案我的 PHP 代码似乎是正确的，因为当我这样做时我得到了一些日期 

...
$testarray = array("limit"=>"2");
$testarray = serialize($testarray);
$testarray = urlencode($testarray);
echo "<li><a target='_blank' href='employees.php?cmd=get_simple_list_employees&param=$testarray'> TEST get_simple_list_employees LIMIT 2 </a></li>";
...

创建的链接看起来像

http://.../employees.php?cmd=get_simple_list_employees&param=a%3A1%3A{s%3A5%3A"limit"%3Bs%3A1%3A"2"%3B}

结果是

[{"emp_no":"10001","birth_date":"1953-09-02","first_name":"Georgi","last_name":"Facello","gender":"M","hire_date":"1986-06-26"},
 {"emp_no":"10002","birth_date":"1964-06-02","first_name":"Bezalel","last_name":"Simmel","gender":"F","hire_date":"1985-11-21"}]

这里有一些 php 代码(如果您需要更多，请告诉我)

<?php
    // START return just data from the DB here 
    // Request Handler starts here  
    // Process Parameters starts here  
        $command="";
        $parameter="";
        $test=FALSE;
        if (!empty($_GET) && !empty($_GET["cmd"])) {
                $command=$_GET["cmd"];
                if (!empty($_GET["param"])){$parameter=$_GET["param"];}
            }
        if (!empty($_GET["test"])){$test=TRUE;}

    //Process Parameters ends here
    ?>
        class RequestHandler {
        private $db;
        public function __construct() {
        $config['db']['host'] = "localhost:3306";
        $config['db']['user'] = "root";
        $config['db']['password'] = "PASSWDHERE";
        $config['db']['database'] = "employees";

        $db = new mysqli($config['db']['host'], $config['db']['user'], $config['db']['password'], $config['db']['database']);
        /* check connection */
        if($db->connect_errno){
            printf("Connect failed: %s", mysqli_connect_error());
            exit();
            }
        $db->query("SET NAMES utf8");
        $this->db = $db;
    }

    private function getResultArray($result) {
        $results_array = array();
        if (!$result) return false;
        while ($row = $result->fetch_assoc()) {
            $results_array[] = $row;
        }
        return json_encode($results_array);
    }

    public function get_simple_list_employees($parameter = array()){
        if(array_key_exists("limit",$parameter)){
            $limit = $parameter['limit'];
        } else {
            $limit = 100;
        }
        $query = $this->db->query("SELECT * FROM employees LIMIT ".$limit.";");
        return !empty($query)?$this->getResultArray($query):false;
        }

    $RH = new RequestHandler();
    if ( $command != "") {
        if ( $parameter != "") {
            $parameter = stripslashes($parameter);
            $parameter = unserialize($parameter);
            $result = $RH->$command($parameter);
        }
        else {
            $result = $RH->$command();
        }
    echo $result;
    exit;
    }

感谢帮助罗布

PS 我用这个testDB https://github.com/datacharmer/test_db

ok - 我自己发现的一个错误 - 新版本的 Controller - 

<script>
var app = angular.module("employeesApp", [])
app.controller('employeesCtrl', function ($scope, $http) {  

    $scope.employees = [];
    $scope.tempEmployeesData = {};

    $http.get('employees.php?cmd=get_simple_list_employees', {
            params:{
                'limit':'1000'
            }
    }).success(function(response){
                console.log(response);
                console.log(response.status);
                $scope.employees = response.records;
        });

});
</script>

现在我返回了一些日期 - 我可以在控制台中看到它 - 但仍然没有显示任何数据......

感谢帮助抢劫

下一个版本 - 现在显示数据 - 但不使用 LIMIT - 而是使用默认值 100 

<script>
var app = angular.module("employeesApp", [])
app.controller('employeesCtrl', function ($scope, $http) {  

    $scope.employees = [];
    $scope.tempEmployeesData = {};

    $http.get('employees.php?cmd=get_simple_list_employees', {
            params:{
                'limit':'10'
            }
    }).success(function(response){
                console.log(response);
                console.log(response.status);
                $scope.employees = response;
        });

});
</script>

有什么提示吗？

使用 then(不成功)确定下一个版本 - 但参数限制:10 仍然不起作用

<script>
var app = angular.module("employeesApp", [])
app.controller('employeesCtrl', function ($scope, $http) {  

    $scope.employees = [];
    $scope.tempEmployeesData = {};

    $http.get('employees.php?cmd=get_simple_list_employees', {
            params:{
                'limit':'10'
            }
    }).**then**(function(response){
                console.log(response.data);
                console.log(response.status);
                **$scope.employees = response.data;**
        });

});
</script>

最后一个工作版本

URL 参数和 JS 参数不同 - 所以我将我的 php 代码更改为:

$command="";
$parameter="";
if (!empty($_GET["paramURL"]) && !empty($_GET["paramJS"])) {
    echo "error: dont use both parameters at the same time !!  you must use paramJS OR paramURL  ";
    exit;   }
if (!empty($_GET) && !empty($_GET["cmd"])) {
        $command=$_GET["cmd"];
        if (!empty($_GET["paramURL"])){
            $parameter=$_GET["paramURL"];
            $parameter = stripslashes($parameter);
            $parameter = unserialize($parameter);
            }
        if(!empty($_GET["paramJS"])){
            $parameter=$_GET["paramJS"];
            $parameter=$parameter[0];
            }
    }

函数看起来像:

public function get_complex_list_employees($parameter = array()){
    $sql = "SELECT ";
    $sql .= array_key_exists("select",$parameter)?$parameter['select']:'*';
    $sql .= " FROM employees";
    $sql .= array_key_exists("where",$parameter)?" WHERE ".$parameter['where']:'';
    $sql .= array_key_exists("order_by",$parameter)?" ORDER BY ".$parameter['order_by']:'';
    $sql .= array_key_exists("limit",$parameter)?" LIMIT ".$parameter['limit']:'';
    $query = $this->db->query($sql);

    return !empty($query)?$this->getResultArray($query):false;
    }

和“呼唤”

$RH = new RequestHandler();
if ( $command != "") {
    if ( $parameter != "") {
        $result = $RH->$command($parameter);
    }
    else {
        $result = $RH->$command();
    }
echo $result;
exit;

我的 AngularJS 脚本看起来像 

<script>
var app = angular.module("employeesApp", [])
app.controller('employeesCtrl', function ($scope, $http) {  

    $scope.employees = [];
    $scope.tempEmployeesData = {};

    $http.get('<?php echo $_SERVER['PHP_SELF'] ?>', {
            params:{
                cmd: 'get_complex_list_employees',
                param: [{limit: 10, select: "*", where: "first_name like \"a%\""}]
            },
            **paramSerializer: '$httpParamSerializerJQLike'**
    }).then(function(response){
                //console.log(response.data);
                //console.log(response.status);
                $scope.employees = response.data;
        });

});
</script>

重要的一步是

paramSerializer: '$httpParamSerializerJQLike'

我在这里找到了解决方案 AngularJS GET ajax call with Array parameters

最佳答案

在你的 http 请求中没有名为 cmd 的参数，你可能想要

$scope.getEmployeesRecords = function(){
            $http.get('employees.php', {
                params:{
                    'cmd':'get_simple_list_employees',
                    'limit':'1000'
                }
            }).then(function(response){
                    $scope.employees = response.data.records;
            });
        };

关于javascript - 将数据从 PHP(mysql) 传递到 AngularJS 时没有数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39443813/

24 4 0
文章推荐： java - BCryptPasswordEncoder 中的 Char[]
文章推荐： c# - MySQL 字段在 LOAD DATA LOCAL INFILE 后从 VARCHAR(20) 更改为 INT
文章推荐： php - 如何使用angularjs在mysql中存储数学函数值？
文章推荐： java - SASL 登录验证失败 : UGFzc3dvcmQ6
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com