使用ajax调用php页面不起作用_Php_Ajax

使用ajax调用php页面不起作用

php ajax

使用ajax调用php页面不起作用,php,ajax,Php,Ajax,我在使用ajax调用php页面时遇到问题。单击按钮时，不会显示chart.php。这两个按钮都不起作用。目标php文件是相同的，只是数据不同，所以我只包含了一个chart.php页面。我怎样才能解决这个问题？请谢谢你的帮助 Index.php代码： <!DOCTYPE html> <html> <head> <title>Charts</title> <link rel="stylesheet" type="tex

我在使用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>


图表
图表1
图表2
document.getElementById（'actbutton1'）。onclick=function（）{
var xhr=new XMLHttpRequest（）；
open（“GET”，“chart1.php”，true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
document.getElementById（“querydiv”）.innerHTML=xhr.responseText；
}
}
xhr.send（）；
}
document.getElementById（'actbutton2'）。onclick=function（）{
var xhr=new XMLHttpRequest（）；
open（“GET”，“chart2.php”，true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
document.getElementById（“querydiv”）.innerHTML=xhr.responseText；
}
}
xhr.send（）；
}

我用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>


图表1
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
var data=google.visualization.arrayToDataTable([
[‘周’、‘欧米安’]，
“两个按钮都不起作用”这意味着什么？单击时没有触发？错误的结果？没有结果？是的，当我单击按钮时，没有结果显示。chart.php页面自行工作。您不能通过chart1.php从ajax加载图表。如果您想加载图表，您需要一个json返回值并将其加载到chart.php而不是chart1.phpok中，谢谢，NigHamza。