javascript - JQuery 未读取 JSON 数组值

Question

我正在从 MySQL 数据库读取 X,Y 坐标。

2个文件(如果需要，我可以发布连接文件):cocod_array和map.php

coordinate_array:我正在制作一个多维数组，这样我就可以使用 json_encode($desk)。我只需要 JS/Jqueryt 部分的 x,y 值。

更新了 PHP 代码和 JQuery 代码..仍然不起作用!？

    <?php
          include 'db_conn.php';

    header('Content-Type: application/json');

    $coordinate_sql = "SELECT x_coord, y_coord FROM coordinates";

    $result = mysqli_query($conn,$coordinate_sql);

    //see if query is good
    if($result === false) {
        die(mysqli_error()); 
    }

    //array that will have number of desks in map area
    while($row = mysqli_fetch_assoc($result)){  

        //get desk array count
        $desk[] = array('x' => $row['x_coord'],                                 
                        'y' => $row['y_coord']);
    } //end while loop
          echo json_encode($desk);  //encode array
?>

上面的代码给了我这个数组的结果:

[{"x":"20","y":"20"},{"x":"30","y":"30"},{"x":"40","y":"40"},{"x":"50","y":"50"}]

map.php:这是不完全工作的部分。我正在尝试使用 JQuery 从 json_encode 获取值，但屏幕上没有输出。

不知道应该使用这两个中的哪一个

 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
 <script  src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

这里需要帮助

 <canvas id="imageView" width="600" height="500"></canvas>          
 <script type="text/javascript">

                //I have no idea how to get the encoded values
    $.post('coordinate_array.php', {}, function(data) {
    results = JSON.parse(data);
        for(i = 0;i < results.length;i++) {
            Paint(results[i].x, results[i].y);
        }
    });

我要执行这个函数

        //function to paint rectangles
        function Paint(x,y)
                {
                var ctx, cv;
                cv = document.getElementById('imageView');
                ctx = cv.getContext('2d');
                ctx.lineWidth = 5;
                ctx.strokeStyle = '#000000';
                //x-axis,y-axis,x-width,y-width
                ctx.strokeRect(x, y, x+100 , y+100); 
                }
            </script>

Answer 1

JSON 形式定义倾向于将一个对象(或键关联数组:{})作为任何 JSON 对象的根，而不是数组([])。

将其包装在一个关联对象内:

$deskOutput = array("coords" => $desk);
echo json_encode($deskOutput);  //encode array

然后，在 JavaScript 方面，您只需要获取“each(data.coords,”即可获得数组。

就此而言，您似乎在 PHP 级别的数组结构中添加了不必要的复杂性。这个怎么样？

$desk[] = array("x" => $row['x_coord'], "y" => $row['y_coord']));

这将为每个 x/y 集创建一个对象。我将让您自行思考如何相应地简化您的 JavaScript。