使用javascript从php请求数据来刷新html的元素

时间:2017-07-27 00:38:53

标签: javascript php json ajax

我有问题。我检查了很多好的答案并试了一下。有些人帮了我很多,但我仍然无法彻底解决我的问题。有人可以帮助我吗?

我有一个包含以下行的文本文件:

123456789, c
123456790, c
123456791, c
123456792, d

我使用PHP脚本读取并解析此文本文件:

$myusers = array();
$my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
$rows = explode("\n",$my_txt);

foreach($rows as $row => $data){
$row_data = explode(',',$data);
array_push($myusers,$row_data); 

}

我可以通过下面的JS代码找到这个php脚本的结果:

var userConStats = <?php echo json_encode( $myusers ) ?>;

for ( i = 0; i < userConStats.length-1; i++){
document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];
}

这个;我第一次填写了必要的html表。一切都很完美。

当我希望这个PHP每秒读取一次文本文件并根据文本文件中的更改刷新表元素时,问题就开始了。 PHP只解析文本文件一次,文本文件中的更改不会在浏览器上进行任何更改。

也许我对问题的解决方法是错误的我不确定。 任何帮助将不胜感激。谢谢! 完整的代码可以在下面找到:

<?php

require 'connectionNetIndex2.php';
include 'txtPHP.php';
include 'userConStatUpdater.php'; 
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-NetIndex</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>

    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>MY_TEST</h1>



        <select name="OperationalMode">
            <option value="">Normal</option>
            <?php while($opMode = mysqli_fetch_assoc($opModes)) { ?>
                <option value="<?php  echo $opMode["operational_mode"];  ?>"><?php echo $opMode["operational_mode"]; ?></option>
            <?php } ?>
        </select>


    <?php if(isset($Users)): ?>
        <table>
            <tr>
                <td>IMSI</td>
                <td>Connection Status</td>
                <td>Profile</td>
            </tr>
            <?php  foreach($Users as $user):  ?>
            <tr>
                <td value="<?php echo $user["u_id"]; ?>"><?php echo $user["imsi"]; ?></td>
                <td id="<?php echo $user['imsi'];?>" class="conStats"></td>
                <td><form action="" method="POST">
                        <select id="profiles" name="Profiles" onchange="valueChanged()">
                            <option value="<?php echo $user["p_id"]; ?>"><?php echo $user["profile_name"]; ?></option>
                            <?php foreach($profiles as $PR): ?>
                                <option name="" value="<?php echo  $PR["p_id"]; ?>"><?php echo $PR["profile_name"]; ?></option>
                            <?php endforeach; ?>
                        </select>
                        <input name="uid" type="hidden" value="<?php echo $user["u_id"]; ?>">
                        <!--<input type="submit" value="save">-->
                    </form>
                </td>
            </tr>
            <?php endforeach; ?>
        </table>
    <?php endif; ?>



    <script type="text/javascript">

        function conStatUpdater(){

            <?php

                    $myusers = array();

                    $my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
                    $rows = explode("\n",$my_txt);

                    foreach($rows as $row => $data){
                        $row_data = explode(',',$data);
                        array_push($myusers,$row_data); 
                        json_encode( $myusers ) ;
                    }
                ?>

            // pass PHP array to JavaScript array
            //Dont refresh the elements.
            var userConStats = <?php echo json_encode( $myusers ) ?>;

            //test is function working every second?
            //test result : YES
            console.log(userConStats[0][1]);


            for ( i = 0; i < userConStats.length-1; i++){
            document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];

            }
        }
        setInterval(conStatUpdater, 1000);

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

2 个答案:

答案 0 :(得分:1)

就像你已经意识到的那样,PHP在生成之后无法更新HTML页面(除非你重新加载页面)。你只能用JavaScript做到这一点。为了每秒获取数据,您需要使用ajaxhttps://www.w3schools.com/xml/ajax_intro.asp)每秒向PHP页面进行异步调用以获取数据。所以你需要这样的东西:

PHP:

$myusers = array();
$my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
$rows = explode("\n",$my_txt);

foreach($rows as $row => $data){
    $row_data = explode(',',$data);
    array_push($myusers,$row_data); 
}

print json_encode($myusers);

您的JavaScript代码:

function updatePage(userConStats) {
    for ( i = 0; i < userConStats.length-1; i++){
        document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];
    }
}

var secondPerRequest = 1;
setInterval(function() {
    $.ajax({
        url: "<your php page>",
        success: function(result) {
            var resultAsObject = JSON.parse(result);
            updatePage(resultAsObject);
        }
    });
}, secondsPerRequest * 1000);

请注意,我使用jQuery来执行ajax调用,因为它更简单。如果您不想使用jQuery,可以在这里找到有关如何在vanilla JS中执行ajax的信息:How to make an AJAX call without jQuery?

答案 1 :(得分:0)

<?php ... ?> javascript函数中的conStatUpdater()块脚本不会在服务器端重新执行,因为它已经被解析并且只会产生相同的结果。

你需要的是一个AJAX函数,它将调用你的php脚本,其中php脚本将在服务器端重新执行,并使用文本文件的更新值来回复你。