Question

我正在尝试创建一个信息中心网站，其中我将接受来自用户的两个输入并使用它来完成我的查询。我想要发生的是当我单击Submit按钮时，程序将获取输入，在我的jsondata.php文件（其输出为JSON格式）中使用它，然后使用该输出绘制我的图表。

我的问题是，当我点击“提交”按钮时，没有显示任何内容，甚至没有显示div或表单。只是一个空白页面。我已经测试了jsondata.php并输出JSON就好了，所以绝对不是这样。它最有可能是AJAX查询。有什么想法吗？

代码如下：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click (function(e){
        e.preventDefault();
        google.load('visualization', '1', {'packages':['table']});
        google.setOnLoadCallback(drawTable);

        function drawTable() {
                var jsonData = $.ajax({
                    type: 'POST',
                    url: 'jsondata.php',
                    dataType: 'json',
                    data: $('#form').serialize(),
                    async: false
                }).responseText;


        var data = new google.visualization.DataTable(jsonData);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: false});

        }
});
});
</script>
</head>
<body>
<div id="table_div" style="height:200px"></div>
<div id="panel">
<form id="form" action="#" method="post"> 
    Input 1:<br /> 
    <input type="text" name="input1" value="" /> 
    <br /><br /> 
    Input 2:<br /> 
    <input type="text" name="input2" value="" /> 
    <br /><br />
    <input id="button" type="submit" value="Submit" /> 
</form>
</div>
</body>
</html>

编辑：能够解决它！刚刚更改了google.load的位置并将回调放入了行中。

$(document).ready(function(){
$('#button').click (function(e){
        e.preventDefault();
        google.load('visualization', '1', {'packages':['corechart'], 'callback':drawTable});
});     
});

function drawTable() {
                var jsonData_status = $.ajax({
                    type: 'POST',
                    url: 'jsondata.php',
                    dataType: 'json',
                    data: $('#form').serialize(),
                    async: false
                }).responseText;
...

Google Charts：无法使用JQuery AJAX加载页面

0 个答案: