Question

我想要放在这里的图是代码。

graph.php

    <?php $mak="1";
    $sen="5";
    ?>
<html>
<head>
    <title>Pollution Mapper</title>
    <!-- Load jQuery -->
    <script language="javascript" type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
       google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                type: "POST",
                url:"json.php" ,
                dataType: "json",
                data: { mak: <?php echo $mak; ?> , sen: <?php echo $sen; ?> },
                async: false,
                success: function(){
                    alert("asd");
                }
            }).responseText;

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



            var chart = new google.visualization.AreaChart(
                        document.getElementById('Chart_div'));
            chart.draw(data);
        }

    </script> 

</head>
<body>
<div id="Chart_div"></div>
</html>

调用上述页面的ajax请求是

$(document).on('click', '.jqf', function () {

    $.ajax({  
            type: "POST",  
            url: "./graph.php",
            data: { mak: $('.makid').attr('id') , sen: $(this).attr('name') },
            success: function(){
            }
        });
        return false; 

});

上面的函数在index.html文件中。我想在index.html文件中加载图形而不重新加载文件。我该怎么做？。

Answer 1

我认为将这个脚本放在页面上已经存在的函数中会更容易，并且不需要调用服务器来设置你从JavaScript传递的两个参数（通过AJAX数据）。< / p>

This jsbin大致表明了这个想法。

Answer 2

你试过这个吗？

为您的索引页添加div：

<div id='chartHolder'></div>

在你的ajax调用成功方法中：

$('#chartHolder').load('./graph.php');

或：

 $.ajax({  
            type: "POST",  
            url: "./graph.php",
            data: { mak: $('.makid').attr('id') , sen: $(this).attr('name') },
            success: function(data){
                $('#chartHolder').html(data);
            }
        });
        return false; 

});

Answer 3

完成后，首先我删除了graph.php并直接插入了函数，就像Sam R所说的那样。

function loadChart(inMak, inSen) {

    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            type: "POST",
            url: "./json.php",
            dataType: "json",
            data: {
                mak: inMak , sen: inSen
            },
            async: false,
            success: function () {
                alert("asd");
            }
        }).responseText;

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

        var chart = new google.visualization.AreaChart(
        document.getElementById('Chart_div'));
        chart.draw(data);
    }
}

$(document).on('click', '.jqf', function () {
    loadChart($('.makid').attr('id'), $(this).attr('name'));
    return false;
});

现在唯一要做的就是这个

而不是

google.load("visualization", "1", {
        packages: ["corechart"]
    });

写

google.load("visualization", "1", {
        packages: ["corechart"] , callback : drawChart
    });

并删除

google.setOnLoadCallback(drawChart);

在页面的div标签内通过ajax请求加载图形

3 个答案: