Google Charts - API 請求和 jQuery 的數據表問題

Question

我正在努力解決什么應該是對 API 的簡單 AJAX 調用，該 API 呈現返回 DataTable 格式的數據（ Google Visualization API 參考）以插入到 Google 圖表中。 通過 AJAX 調用成功接收數據，我可以毫無問題地向瀏覽器發出響應。 但是，當我傳入相同的變量chartData - 我在控制台中遇到錯誤：

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 1 at JSON.parse ()

我已經把我正在使用的代碼放在下面； 任何幫助將不勝感激。

前端 [charts-testing.php]

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var chartData = $.ajax({
                    url: "includes/processing/process_chart_data.php",
                    async: false, 
                }).responseText;

                alert(chartData);
                var data = new google.visualization.DataTable(chartData);
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
        }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

返回結束 [流程圖表數據.php]

<?php
include_once '../classes/clsAPI.php';
$objAPI = new clsAPI();

$api = [redacted]
$chartData = $objAPI->getDataTable($api);

header('Content-Type: text/plain');
echo $chartData;
?>

來自 process-chart-data.php 的響應

{cols:[{id:'AgeRange',label:'Age Range',type:'string'},{id:'MemberCount',label:'Member Count',type:'number'}],rows:[{c:[{v:'18-34'},{v:200}]},{c:[{v:'35-44'},{v:200}]},{c:[{v:'45-54'},{v:400}]},{c:[{v:'55-64'},{v:500}]},{c:[{v:'65-74'},{v:600}]}]}

請求頭

GET /includes/processing/process_chart_data.php HTTP/1.1
Host: local.site.com
Connection: keep-alive
Accept: */*
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36
Referer: http://local.site.com/charts-testing.php
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,fr;q=0.8

響應頭

HTTP/1.1 200 OK
Date: Thu, 13 Feb 2020 07:08:12 GMT
Server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.10 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.9 Perl/v5.24.0
X-Powered-By: PHP/7.2.10
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Content-Length: 247
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/plain;charset=UTF-8

還應該注意的是，通過使用來自 API 的准確響應（無格式）替換chartData ，它可以chartData呈現圖表。

編輯

為了說明在手動注入可視化調用時 API 調用的響應，請參見下文。 這成功地顯示了圖表並且與 var chartData的值相同：

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var chartData = $.ajax({
                    url: "includes/processing/process_chart_data.php",
                    async: false, 
                }).responseText;

                alert(chartData);
                var data = new google.visualization.DataTable({cols:[{id:"AgeRange",label:"Age Range",type:"string"},{id:"MemberCount",label:"Member Count",type:"number"}],rows:[{c:[{v:"18-34"},{v:200}]},{c:[{v:"35-44"},{v:200}]},{c:[{v:"45-54"},{v:400}]},{c:[{v:"55-64"},{v:500}]},{c:[{v:"65-74"},{v:600}]}]});
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
        }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

Answer 1

似乎 Google Visualization API 對來自服務器的數據響應執行 json.parse

$objAPI->getDataTable應該像這樣輸出你的 JSON 對象

而不是對字符串和對象元素名稱使用“cols”，請使用“cols”

  cols: [{id: 'A', label: 'NEW A', type: 'string'}]

用這個

"cols": [{"id":"A", "label": "NEW A", "type": "string"}]

還有為什么使用 async:false

看看這個
你應該使用 async 然后調用 on-success success:function(data){/*call chart foramtting*/}

async (default: true) 類型：Boolean 默認情況下，所有請求都是異步發送的（即默認設置為 true）。 如果您需要同步請求，請將此選項設置為 false。 跨域請求和 dataType: "jsonp" 請求不支持同步操作。 請注意，同步請求可能會暫時鎖定瀏覽器，從而在請求處於活動狀態時禁用任何操作。 從 jQuery 1.8 開始，不推薦使用帶有 jqXHR ($.Deferred) 的 async: false ； 您必須使用成功/錯誤/完成回調選項而不是 jqXHR 對象的相應方法，例如 jqXHR.done()。

或者

$.get('includes/processing/process_chart_data.php', function (chartData) {
var data = new google.visualization.DataTable(chartData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});});

Google Charts - API 請求和 jQuery 的數據表問題

問題描述

1 個解決方案

解決方案1
1 2020-02-13 08:20:30

Google Charts - API 請求和 jQuery 的數據表問題

問題描述

1 個解決方案

解決方案1 1 2020-02-13 08:20:30

解決方案1
1 2020-02-13 08:20:30