时间戳

首页 > 解决方案 > 仅使用 vanilla javascript 从 div 上的外部实时加载文件调用 javascript 函数

javascript - 仅使用 vanilla javascript 从 div 上的外部实时加载文件调用 javascript 函数

问题描述

我有一个文件（load.php），它在我的主页（home.php）内每秒加载一个“div”。load.php 有一些 JavaScript 函数可以获取一行的值（cells[i].innerHTML），但是在 home.php 上加载 load.php 时，这些函数不起作用，但在直接加载 load.php 时可以正常工作或包含在 home.php 中。加载页面和调用 load.php 上的 javascript 函数都是此 Web 应用程序的核心功能，请提供一些帮助，我们将不胜感激。下面是 home.php 和 load.php 的代码

主页.php

<html>
<head>
</head>
<body>
    <div id="showReload"></div>
    <script type="text/javascript">

        window.onload = function(){
            let showReload = document.getElementById('showReload');
            function reload(div, file){
                loadDiv(div, file);
                setTimeout(function(){
                    reload(div, file);
                }, 1000);

            }
            reload('showReload', 'load.php');
        }
            function loadDiv(div, files){
                if (window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                }else{
                    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
                }

                xmlhttp.onreadystatechange = function(){
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        document.getElementById(div).innerHTML = xmlhttp.responseText;
                    }
                }

                xmlhttp.open('GET',files,true);
                xmlhttp.send();
            }

    </script>
</body>
</html>

加载.php

<?php  

echo date("Y/M/D,H:i:s");

$host = 'localhost';
$user = 'root';
$pass = '';
$db_name = 'dataBaseName';

$mysqli = new mysqli($host, $user, $pass, $db_name) or die("Connect to database failed");

$fetch = $mysqli->query("SELECT * FROM doctors WHERE status = 1");
if (!$fetch) {
    echo "Failed to fetch data from database";
    return false;
}
if ($fetch->num_rows > 0) {

    while ($row = $fetch->fetch_assoc()) {
        $fname = $row['firstname'];
        $mname = $row['middlename'];
        $lname = $row['lastname'];
        $phone = $row['pnumber'];
        $id = $row['ID'];

        ?>
            <table id="table">
                <tr>
                    <td class="hide"><?php echo $id; ?></td>
                    <td><?php echo $fname; ?></td>
                    <td><?php echo $mname; ?></td>
                    <td><?php echo $lname; ?></td>
                    <td><?php echo $phone; ?></td>
                </tr>
            </table>
        <?php 
    }
}


?>
<script type="text/javascript">

    let table = document.getElementById('table'),
        rows = document.getElementsByTagName('tr'),
        cells = document.getElementsByTagName('td'),
        i;
    for (i = 0; i < rows.length; i++){
        rows[i].onclick = function(){
            console.log(this.cells[3].innerHTML);
        }
    }
</script>

标签： javascriptphphtml

解决方案

推荐阅读