PHP Ajax 执行顺序问题

问题描述 投票：0回答：1

我确实有下面的index.php和operatora.php，如下所示。我怀疑这个问题应该是由于执行顺序造成的，因为当我将 

loadChart()
函数添加到 
index.php
内的 
head
时，我可以看到图形。我不需要将 loachart() 函数添加到index.php。因为这些图表会根据操作者的不同而随时变化。所以我需要将它们保存在相关的 php 文件中。有人可以告诉我我的代码有什么问题吗？

下面是index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Operator Bypass Portal</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        .wrapper {
            display: flex;
        }

        .sidebar {
            width: 250px;
            padding: 20px;
            background-color: #7F00FF;
            color: black;
        }

        .main_content {
            flex: 1;
            padding: 20px;
        }
    </style>
    <script>
          function loadChart() {
              //If I add the content here I can see the graphs
          }
</script>
</head>
<body>
    <?php
    session_start();

    // Check if the user is logged in, if not then redirect to the login page
    if (!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true) {
        header("location: login.php");
        exit;
    }

    $connect = mysqli_connect("127.0.0.1", "root", "", "System_Monitor");
    $query = "SELECT user_type, operator FROM BypassPortal_OP_users where id='" . $_SESSION["id"] . "' order by id asc";
    $result = mysqli_query($connect, $query);
    ?>

    <div class="wrapper">
        <div class="sidebar">
            <h2 style="font-family: Verdana;">Portal</h2>
            <ul>
                <li><a href="javascript:void(0);" onclick="loadContent('home.php')"><i class="fa fa-home"></i> Home</a></li>
                <?php
                while ($row = mysqli_fetch_array($result)) {
                    if (strstr($row["operator"], "SLT")) {
                        echo '<li><a href="javascript:void(0);" onclick="loadContent(\'operatora.php\')"><i class="fa fa-paper-plane"></i> Operator - A</a></li>';
                        echo '<li><a href="logout.php"><i class="fa fa-paper-plane"></i> Logout</a></li>';
                    }
                }
                ?>
            </ul>
        </div>
        <div class="main_content">
            <!-- The content will be loaded here dynamically -->
        </div>
    </div>

    <script>
    function loadDefaultContent() {
        var mainContent = document.querySelector(".main_content");
        var loader = '<div class="loader">Loading...</div>';
        mainContent.innerHTML = loader;

        var xhr = new XMLHttpRequest();
        xhr.open("GET", 'home.php', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                mainContent.innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    }

    // Call the function to load the default content
    loadDefaultContent();

   function loadContent(content) {
       var mainContent = document.querySelector(".main_content");
       var loader = '<div class="loader">Loading...</div>';
       mainContent.innerHTML = loader;

       var xhr = new XMLHttpRequest();
       xhr.open("GET", content, true);
       xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            mainContent.innerHTML = xhr.responseText;
            loadChart();
        } else {
            console.error("Error loading content: " + xhr.status);
        }
    }
};
       xhr.send();
     }
    </script>
</body>
</html>

这是opera.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Operator - A</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
        }
        .grid-item {
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>Operator - A</h2>
    <div class="grid-container">
        <div class="grid-item">
            <canvas id="graph1"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph2"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph3"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph4"></canvas>
        </div>
    </div>

    <script>
        // Sample data for the bar chart
        var data = {
            labels: ["Label 1", "Label 2", "Label 3"],
            datasets: [
                {
                    label: "Graph 1",
                    data: [30, 50, 20],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
            ]
        };

        // Function to create and display the charts
        function loadChart() {
            var ctx = document.getElementById('graph1').getContext('2d');

            // Create the bar chart using Chart.js
            var chart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Call the function to load and display the charts
        loadChart();
    </script>
</body>
</html>
php ajax
1个回答
0
投票

  1. 您正在将 

    operatora.php
    的内容加载到 
    div
    中，因此 
    operatora.php
    不得包含整个 html 文档，而只能包含 
    div
    中所需的元素（可能是现在 
    <body>
    中的所有内容） ).

  2. 函数

    loadDefaultContent()
    似乎完全多余，你可以使用函数
    loadContent()
    代替。

  3. 出于安全原因，不会隐式评估 ajax 请求返回的 HTML 中包含的脚本。您可以明确地

    eval
    它们，但这不是最好的整体设计。然而，这就是它的完成方式：

    function loadContent(content) {
        var mainContent = document.querySelector(".main_content");
        var loader = '<div class="loader">Loading...</div>';
        mainContent.innerHTML = loader;

        var xhr = new XMLHttpRequest();
        xhr.open("GET", content, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    mainContent.innerHTML = xhr.responseText;
                    const scripts = mainContent.getElementsByTagName("script");
                    for (const script of scripts) {
                        console.log(eval(script.innerHTML));
                    }
                } else {
                    console.error("Error loading content: " + xhr.status);
                }
            }
        };
        xhr.send();
    }
  1. 您不应该在 
    operatora.php
    中返回函数，以避免再次声明函数。只需在 
    <script>
    块内执行您必须执行的操作即可。这是我测试过的
    operatora.php
    ：
    <h2>Operator - A</h2>
    <div class="grid-container">
        <div class="grid-item">
            <canvas id="graph1"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph2"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph3"></canvas>
        </div>
        <div class="grid-item">
            <canvas id="graph4"></canvas>
        </div>
    </div>

    <script>
        // Sample data for the bar chart
        var data = {
            labels: ["Label 1", "Label 2", "Label 3"],
            datasets: [
                {
                    label: "Graph 1",
                    data: [30, 50, 20],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
            ]
        };

        var ctx = document.getElementById('graph1').getContext('2d');

        // Create the bar chart using Chart.js
        var chart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
  1. 仅供参考，这是我用于测试的
    index.php
    ：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Operator Bypass Portal</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        .wrapper {
            display: flex;
        }

        .sidebar {
            width: 250px;
            padding: 20px;
            background-color: #7F00FF;
            color: black;
        }

        .main_content {
            flex: 1;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar">
            <h2 style="font-family: Verdana;">Portal</h2>
            <ul>
                <li><a href="javascript:void(0);" onclick="loadContent('home.php')"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="javascript:void(0);" onclick="loadContent('operatora.php')"><i class="fa fa-paper-plane"></i> Operator - A</a></li>';
            </ul>
        </div>
        <div class="main_content">
            <!-- The content will be loaded here dynamically -->
        </div>
    </div>

    <script>
    // Call the function to load the default content
    loadContent('home.php')

    function loadContent(content) {
        var mainContent = document.querySelector(".main_content");
        var loader = '<div class="loader">Loading...</div>';
        mainContent.innerHTML = loader;

        var xhr = new XMLHttpRequest();
        xhr.open("GET", content, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    mainContent.innerHTML = xhr.responseText;
                    const scripts = mainContent.getElementsByTagName("script");
                    for (const script of scripts) {
                        console.log(eval(script.innerHTML));
                    }
                } else {
                    console.error("Error loading content: " + xhr.status);
                }
            }
        };
        xhr.send();
    }
    </script>
</body>
</html>
  1. 由于您没有提供
    home.php
    ，我已经使用了
    operatora.php
    的副本和随机
    data
    。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.