Ajax / JSON表单jQuery.parseJSON()错误如何在JavaScript中编写每个值?

时间:2012-05-25 12:19:35

标签: jquery ajax json forms

我制作了一个用于显示用户统计图表的表单。用户需要选择月份和年份,然后将显示图表。

我用AJAX做了这个并做了一个JSON响应。

这是我的JavaScript代码:

//Show statistic
$('.statistic_submit').click(function(){
    if ($('#month').val() == 'none' || $('#year').val() == 'none') {
        $("#dialog_empty").dialog( "open" );
        return false;
    }

    var form = $('#statistic_view');  
    var data = form.serialize(); 

    $.ajax({
        url: "include/scripts/user_statistic.php",
        type: "POST",
        data: data,
        dataType: 'json',
        success: function (reqCode) {
            console.log(reqCode);
            if (reqCode['error_code'] == 1) {
                //Generate diagram  
                $(".done").html( 
                    '<p class="bold center">' + reqCode['month'] + ' ' + reqCode['year'] + '</p>' +
                    '<canvas id="cvs" width="650" height="250">[No canvas support]</canvas>'
                );  

                var data_string = jQuery.parseJSON(reqCode['data_string']);
                var labels_tooltip = jQuery.parseJSON(reqCode['labels_tooltip']);
                var labels_string = reqCode['labels_string'];

                var chart = new RGraph.Line('cvs', data_string);
                    chart.Set('chart.tooltips', labels_tooltip);
                    chart.Set('chart.tooltips.effect', "expand");
                    chart.Set('chart.background.grid.autofit', true);
                    chart.Set('chart.gutter.left', 35);
                    chart.Set('chart.gutter.right', 5); 
                    chart.Set('chart.hmargin', 10);
                    chart.Set('chart.tickmarks', 'circle');
                    chart.Set('chart.labels', labels_string);
                    chart.Draw();

                $('.done').fadeOut('slow'); 
                $('.done').fadeIn('slow');
            }
            if (reqCode['error_code'] == 2) {
                //No values found
                $('.done').fadeOut('slow');
                $("#dialog_error").dialog( "open" );
            }
        }
    });
    return false;
});

这是我的user_statistic.php的提取:

$data = array();
$sql = "SELECT
                Anzahl
            FROM
                 Counter
            WHERE
                 YEAR(Datum) = '".$year."' AND
                 MONTH(Datum) = '".$month."'";

    if (!$result = $db->query($sql)) {
        return $db->error;
    }

    $row = $result->fetch_assoc();
    $data = (int)$row['Anzahl'];

$response['error_code'] = '1'; 
    $response['data_string'] = "[" . join(", ", $data) . "]";
    $response['labels_string'] = "['" . join("', '", $labels) . "']";
    $response['labels_tooltip'] = "['" . join("', '", $data) . "']";
    $response['month'] = $month_name[$month];
    $response['year'] = $year;

    echo json_encode($response);

此reqCode响应:

error_code "1"
data_string "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 2, 0, 26, 1, 5, 3, 1, 1, 0, 0, 0, 0, 0, 0]"  
labels_string "['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']" 
labels_tooltip "['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '3', '2', '2', '0', '26', '1', '5', '3', '1', '1', '0', '0', '0', '0', '0', '0']" 
month "Mai" 
year 2012

这就是.log所说的:

JSON.parse: unexpected character!

我发现data_string工作正常。由于'..',labels_string和labels_tooltip是问题所在。唯一的问题是图表需要'..'。

我是JavaScript和Ajax / JSON的新手,所以我不知道如何处理这个问题。在php中我会使用数组[] []并创建一个循环。例如:

echo "[";
for ($i; $i<= ..;$i++) {
  echo "'".reqCode['labels_string'][$i]."', ";
}
echo"]";

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

问题来自解析单引号'。 JSON使用双引号"来设置字符串值。因此,您的有效字符串化JSON响应应该看起来像"[\"1\",\"2\", ...]",而您的"['1','2', ...]"不正确。

事实上,我不明白为什么你会这样做:

$response['data_string'] = "[" . join(", ", $data) . "]";

如果您最终使用json_encode($response)

实际上,即使某些元素包含其他数组,PHP函数json_encode()也会成功地对$response数组进行字符串化。

所以,你可以简单地使用

$response['data_string'] = $data;

然后,在客户端,不需要使用parseJSON方法解析字符串。你只需要这样做:

var data_string = reqCode['data_string'];

如果你需要传递带有字符串元素的$data数组,你可以创建一个新数组或使用类似的东西:

array_filter($data, create_function('$x', 'return strval($x)'));