JSON $ajax 问题答案

【问题标题】：JSON $ajax problemsJSON $ajax 问题
【发布时间】：2017-11-13 21:56:51
【问题描述】：

我尝试从 JSON 文件制作谷歌图表，但看不到错误。这是我处理 JSON 数据文件的 php。 php代码工作得很好，它给了我这个：

[["Durata pedeapsa","count"],["3","4"],["7","2"],["5","1"],["2", "2"],["4","1"]]

但是我无法将它加载到 html 中。

<?php
//Oracle DB user name
$username = 'TW';

// Oracle DB user password
$password = 'TW';

// Oracle DB connection string
$connection_string = 'localhost/xe';

//Connect to an Oracle database
$connection = oci_connect(
    $username,
    $password,
    $connection_string
);

$stid = oci_parse($connection, 'SELECT to_number(substr(durata_pedeapsa,0,1)) as "pedeapsa" , COUNT(DURATA_PEDEAPSA) as "count" FROM DETINUTI group by substr(durata_pedeapsa,0,1)');
if (!$stid) {
    $e = oci_error($connection);
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}

$r = oci_execute($stid);
if (!$r) {
    $e = oci_error($stid);
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}

# set heading   
    $data[0] = array('Durata pedeapsa','count');
    $i=1;
        while (($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_LOBS)) != false) {
            $pedeapsa = $row['pedeapsa'];
            $count = $row['count'];
            $data[$i] = array($pedeapsa,$count);
            $i = $i +1;
        }
echo json_encode($data);
oci_close($connection);
?>

这是我应该创建图表的 html。

<html>
<head>
    <title>Suji</title>
    <!-- Load jQuery -->
    <script language="javascript" type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    <script src="jquery.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                url: "/test.php",
                dataType: "json",
                async: false
            }).responseText;

            var obj = window.JSON.stringify(jsonData);
            var data = google.visualization.arrayToDataTable(obj);

            var options = {title: 'Suji'};

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;">
    </div>
</body>
</html>

【问题讨论】：

你为什么要把它串起来？而且使用同步调用是不好的做法。
我不知道如何使用 JSON。我必须为明天做一个项目，这是我在互联网上找到的。有什么建议吗？
如果对 JSON 数据进行字符串化，则可以将具有层次结构的可读和可利用数据转换为线性字符链。所以这对于构建图表是行不通的。另外，不要使用async:false。曾经。没有意义，它会导致糟糕的用户体验，并且已被弃用。

标签： javascript php html json google-visualization

【解决方案1】：

使用 $.ajax() 的成功回调方法将数据加载到图表中，并且不要调用 JSON.stringify()，因为谷歌图表接受 jquery 对象而不是 json 字符串。您的 drawChart() 函数应该如下所示。

function drawChart() {
    $.ajax({
    url: "/test.php",
            dataType: "json",
            success:function (res) {
                var jsonData = res.responseText;
                var data = google.visualization.arrayToDataTable(jsonData);
                var options = {title: 'Suji'};
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
         }
    });
}

我希望它能正常工作，并且您的 php 脚本返回有效的 json。

【讨论】：

不幸的是，这不起作用。还是空白页。

【解决方案2】：

首先，建议在format google accepts中构建json
这将允许您直接创建数据表

PHP

# set heading
$data = array();

$data['cols'] = array(
  array('label' => 'Durata pedeapsa', 'type' => 'string'),
  array('label' => 'count', 'type' => 'number')
);

$data['rows'] = array();
while (($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_LOBS)) != false)
  $data['rows'][] = array('c' => array(
    array('v' => (string) $row['pedeapsa']),
    array('v' => (int) $row['count'])
  ));
}
echo json_encode($data);

接下来，不需要两个谷歌图表库

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

jsapi 是一个旧库，应该不再使用，删除它

这只会改变load 语句，参见下面的sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  $.ajax({
    url: "/test.php",
    dataType: "json",
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable(jsonData);
    var options = {title: 'Suji'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  });
}

【讨论】：

【解决方案3】：

用这个替换你的js代码

 <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                url: "/test.php",
                dataType: "json",
                async: false
            }).responseText;

            //var obj = JSON.parse(jsonData);
           // var data = google.visualization.arrayToDataTable(obj);
             var dataTable = new google.visualization.DataTable();
             dataTable.addColumn('string', 'Durata pedeapsa');
            dataTable.addColumn('number', 'Count');

           // dataTable.addRows([jsonData]);
            dataTable.addRows(JSON.parse(jsonData));  


            var options = {title: 'Suji'};

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);
        }

    </script>

PHP 代码

在你的 php 代码中注释这一行

//$data[0] = array('Durata pedeapsa','count'); //comment this line

还将计数值转换为整数

例子

$data[$i] = array($pedeapsa,(int)$count);

现在您的 php 文件数据将返回 -

[["3",4],["7",2],["5",1],["2",2],["4",1]]

【讨论】：

你试过我的编辑答案 Teodor O.
事实上它返回这个：{"1":["3",4],"2":["7",2],"3":["5",1] ,"4":["2",2],"5":["4",1]} 也不起作用。还是空白页