Question

我在用ajax调用php页面时遇到问题。当我单击按钮时，chart.php不显示。这两个按钮都不起作用。目标php文件仅在数据不同的情况下是相同的，因此我只包括了一个chart.php页面。我怎样才能解决这个问题？请。感谢您的帮助！

Index.php代码：

<!DOCTYPE html>
<html>
<head>
    <title>Charts</title>
    <link rel="stylesheet" type="text/css" href="etc/main.css" />
    <script type="text/javascript" src="etc/jquery-2.1.4.js"></script>

</head>

<body>
    <div id="wrapper">
        <div id="header">

            <button id='actbutton1'> Chart1</button>
            <button id='actbutton2'> Chart2</button>
        </div>

        <div id="contentliquid">
            <div id="content">

                <div id="querydiv">

                </div>

            </div>

        </div>

        <div id="leftcolumn">
        </div>
    </div>

    <script>
        document.getElementById('actbutton1').onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "chart1.php", true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("querydiv").innerHTML = xhr.responseText;
                }
            }
            xhr.send();
        }

        document.getElementById('actbutton2').onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "chart2.php", true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("querydiv").innerHTML = xhr.responseText;
                }
            }
            xhr.send();
        }
    </script>

</body>

</html>

我用ajax调用的页面chart1.php是这样的：

<?php

    $servername = "localhost";
    $username = "root";
    $password = ""; 
    $dbname = "mydb";  

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con->connect_error) {
        die("Connection failed: " . $con->connect_error);
    }
    else
    {

    }
    $query = "SELECT Week, Omean FROM charts"; 
    $aresult = $con->query($query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Chart1</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();    
            var data = google.visualization.arrayToDataTable([

                ['Week','Omean'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Week"]."', ".$row["Omean"]."],";
                    }
                ?>

               ]);

    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'    
    }]);            

            var options = {
                 title: 'Chart1',
                'width':1700,
                'height':600,
                 hAxis : {textStyle : {fontSize: 8}},
                'tooltip' : { trigger: 'none'},  
                 enableInteractivity: false,   
                 legend: { position: 'bottom' }
                     };    

               var chart = new             
    google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options);        
            chart.draw(view, options);  // <-- use data view    
        }

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

用ajax调用php页面不起作用

0 个答案: