Javascript JQuery未读取JSON数组值

Javascript JQuery未读取JSON数组值,javascript,php,jquery,mysql,json,Javascript,Php,Jquery,Mysql,Json,我正在从MySQL数据库读取X,Y坐标 2个文件(如果需要,我可以发布连接文件):坐标数组和map.php 坐标数组:我正在制作一个多维数组,这样我就可以使用json编码($desk)。我只需要JS/Jqueryt部分的x,y值 更新了PHP代码和JQuery代码。。还是不行 <?php include 'db_conn.php'; header('Content-Type: application/json'); $coordinate_s

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

2个文件(如果需要,我可以发布连接文件):坐标数组和map.php

坐标数组:我正在制作一个多维数组,这样我就可以使用json编码($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
?>
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);
        }
    });

//我不知道如何获得编码值
$.post('coordinate_array.php',{},函数(数据){
results=JSON.parse(数据);
对于(i=0;i
我想执行这个函数

        //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>
//用于绘制矩形的函数
功能漆(x,y)
{
var-ctx,cv;
cv=document.getElementById('imageView');
ctx=cv.getContext('2d');
ctx.lineWidth=5;
ctx.strokeStyle='#000000';
//x轴,y轴,x宽度,y宽度
ctx.冲程(x,y,x+100,y+100);
}

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

要将其包裹在一个关联对象中,请执行以下操作:

$deskOutput = array("coords" => $desk);
echo json_encode($deskOutput);  //encode array
然后,在JavaScript方面,您只需要获取“
每个(data.coords,
”,就可以得到您的数组

就这一点而言,您似乎在PHP级别的数组结构中增加了不必要的复杂性

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

这将为每个x/y集只创建一个对象。我将留给您来研究如何相应地简化JavaScript。

首先,让$desk如下所示:

while($row = mysqli_fetch_assoc($result)){  

    //get desk array count
    $desk[] = array('x' => $row['x_coord'], 'y' => $row['y_coord']);
}
echo json_encode($desk);
并按如下方式调用php脚本:

$.post('coordinate_array.php', {}, function(data) {
    results = JSON.parse(data);
    for(i = 0;i < results.length;i++) {
        Paint(results[i].x, results[i].y);
    }
});
$.post('coordinate_array.php',{},函数(数据){
results=JSON.parse(数据);
对于(i=0;i
我会很快测试一下,以确保一切正常。

编辑:好的,我已经测试过了,它可以工作。

你可以使用jQuery包含中的任何一个-第一个要求你将jQuery存储在本地。你是否至少在剩下的javascript之前成功地包含了jQuery和/或你的浏览器开发工具的控制台中有任何错误消息?请注意,mysqli_fetch_all($result,MYSQLI_ASSOC)可以在包含JQuery的同时回复整个循环。我得到的控制台错误是:SCRIPT1008:函数(date)后应为“{”…我不知道!?@jeroenI对第一部分不太确定;OP的json至少在上进行了验证,所以我会说它是错误的。嗯…我承认我很惊讶地发现至少有一个浏览器解析方法可以很好地使用数组;但是我知道的一些工具在这方面遇到了问题。伙计们,我更新了我的代码,请检查一下。但是我在上发现了这个错误ce I在jsonlint.com上验证JSON:Parse error在第1行:$.post('coordinate_a^期望'{','['嘿,我试过了,但仍然没有结果?我使用了jsonlint.com上的验证程序,并显示了这样的错误消息:Parse error在第1行:$.post('coordinate_a^期望'{','['…这些括号里有什么东西可以放吗?你什么时候用的?我在发布后不久就出现了语法错误(但像15小时前一样修复了它),但请确保您完全按照原样使用它。除了您如何称呼它。这确实有效。您是否也更改了我发布的php?还有一个明显的问题,但页面上包含了jquery?
$.post('coordinate_array.php', {}, function(data) {
    results = JSON.parse(data);
    for(i = 0;i < results.length;i++) {
        Paint(results[i].x, results[i].y);
    }
});