2014-01-27 16 views
0

我正在生成一个使用PHP的JSON“文本”,并希望将它包含在同一个文件中的JavaScript中。 我觉得我有问题了解java如何处理JSON作为文本vs作为对象。在JavaScript中的PHP JSON变量

注意:我将马上更改mysql到mysqli,只是想让这个东西先工作。 这里是我的脚本:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Knox QA tickets status</title> 
</head> 
<body> 
    <script src="am/amcharts/amcharts.js" type="text/javascript"></script> 
    <script src="am/amcharts/serial.js" type="text/javascript"></script> 

<?php 
    //$subm = "8"; 
    // This is being loaded from a selection html script 
    $subm = $_POST["submoduleID"]; 
    if(!isset($_POST["submoduleID"])) 
    { 
    // set it to the default container if it's not set. 
    $subm = "8"; 
    } 

    // Connect to MySQL 
    $link = mysql_connect('localhost', 'root', 'secret'); 
    if (!$link) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    // Select the data base 
    $db = mysql_select_db('xqa_status', $link); 
    if (!$db) { 
     die ('Error selecting database \'test\' : ' . mysql_error()); 
    } 

    // Fetch the data 
    $query = ("select date, tested, passed from test_status where xqa_id=" . $subm . " order by test_status_id limit 10"); 

    $result = mysql_query($query); 

    // Make a josn formatted output 
    $rows = array(); 
    while ($r = mysql_fetch_assoc($result)) { 
     $rows[] = $r; 
    } 
    $chartData_json = json_encode($rows); 
    print $chartData_json; 
    mysql_close($link); 
?> 


<!-- Custom Function 
    <script> 
    AmCharts.loadJSON = function(file) { 
     // create the request 
     if (window.XMLHttpRequest) { 
     // IE7+, Firefox, Chrome, Opera, Safari 
     var request = new XMLHttpRequest(); 
     } else { 
     // code for IE6, IE5 
     var request = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 

     request.open('GET', file, false); 
     request.send(); 

     // parse adn return the output 
     return eval(request.responseText); 
    }; 
    </script> --> 


<!-- chart container --> 
<div id="chartdiv" style="width: 600px; height: 300px;"></div> 


<!-- the chart code --> 
    <script> 
    var chart; 
    var chartData1 = "<?php echo $chartData_json; ?>"; 
    var myObject = JSON.parse(chartData1, reviver); 
    // create chart 
    AmCharts.ready(function() { 

     // load the data 
     // SERIAL CHART 
     chart = new AmCharts.AmSerialChart(); 
     chart.pathToImages = "am/amcharts/images/"; 
     chart.dataProvider = myObject; 
     chart.categoryField = "date"; 
     chart.dataDateFormat = "YYYY-MM-DD"; 

     // GRAPHS 

     var graph1 = new AmCharts.AmGraph(); 
     graph1.type = "smoothedLine"; 
     graph1.title = "Tested"; 
     graph1.valueField = "tested"; 
     graph1.bullet = "round"; 
     graph1.bulletSize = 5; 
     graph1.bulletBorderColor = "#FFFFFF"; 
     graph1.bulletBorderThickness = 2; 
     graph1.lineThickness = 2; 
     graph1.lineAlpha = 0.5; 
     chart.addGraph(graph1); 

     var graph2 = new AmCharts.AmGraph(); 
     graph2.type = "smoothedLine"; 
     graph2.title = "Passed"; 
     graph2.valueField = "passed"; 
     graph2.bullet = "round"; 
     graph2.bulletSize = 5; 
     graph2.bulletBorderColor = "#FFFFFF"; 
     graph2.bulletBorderThickness = 2; 
     graph2.lineThickness = 2; 
     graph2.lineAlpha = 0.5; 
     chart.addGraph(graph2); 

     // CATEGORY AXIS 
     chart.categoryAxis.parseDates = true; 
     chart.categoryAxis.autoGridCount = false; 
     chart.categoryAxis.gridCout = chartData.length; 
     chart.categoryAxis.gridPosition = "start"; 
     chart.categoryAxis.labelRotation = 90; 

     // LEGEND 
     var legend = new AmCharts.AmLegend(); 
     chart.addLegend(legend); 

     // CURSOR 
     var chartCursor = new AmCharts.ChartCursor(); 
     chartCursor.cursorAlpha = 0; 
     chartCursor.cursorPosition = "mouse"; 
     chartCursor.categoryBalloonDateFormat = "YYYY-MM-DD"; 
     chart.addChartCursor(chartCursor); 

     // SCROLLBAR 
     var chartScrollbar = new AmCharts.ChartScrollbar(); 
     chart.addChartScrollbar(chartScrollbar); 

     // 3D 
     // chart.angle = 30; 
     // chart.depth3D = 15; 



     // WRITE 
     chart.write("chartdiv"); 



    }); 

    </script> 

</body> 
</html> 

的JSON输出的一个例子是这样的:

[{"date":"2014-01-09","tested":"12","passed":"32"},{"date":"2014-01-10","tested":"12","passed":"34"},{"date":"2014-01-11","tested":"22","passed":"34"},{"date":"2014-01-12","tested":"22","passed":"34"},{"date":"2014-01-13","tested":"40","passed":"34"},{"date":"2014-01-14","tested":"40","passed":"34"},{"date":"2014-01-15","tested":"40","passed":"34"}] 
+1

不是很清楚..你确切的问题是什么? – meda

+0

在一个文件中混合使用javascript和php,oh我的 – tenub

+1

感谢Patrick,这确实解决了我的问题,但是由于它在“双引号”内,因此Javascript无法理解JSON作为对象。 – user3239109

回答

2

你需要你的PHP的输出分配到一个Javascript变量:

<script> 
    var json_data=<?php 

... 

?>; 

    // Do stuff with json_data 
</script> 

然后json_data将是一个数组或对象在Javascript中(它不是JSON了,因为JSON将被解析为数组字面值,而不是字符串)。这很可能是你想要的,因为那时你可以使用数组,例如json_data[0].data

+0

别忘了在你的json周围添加引号。最好写下如下内容:var json_data =“<?php print $ sJSON;?>”; – mat

+4

@mat,不会因为json本身包含引号而导致错误,所以当javascript加载它时,会看到像'“{”somevar“:”somevalue“}”''“的错误。 Paulpro拥有它的方式,json字符串将被视为对象字面值。 –

+0

但我确实有这个变量: var chartData1 =“<?php echo $ chartData_json;?>”; 双引号实际上是问题所在。 – user3239109