我如何使用 javascript 刷新頁面的一部分

Question

我嘗試過濾信息，但我只需要刷新表格並使用javascript顯示信息，我找不到一個好的方法來做到這一點

我嘗試將此代碼用於我的頁面，但我不知道如何實現它

JS

    let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

    async function refresh() {
          btn.style.visibility= "hidden";
          dynamicPart.innerHTML="Loading..."
          dynamicPart.innerHTML=await(await fetch(url)).text();
          setTimeout(refresh,2000);}

方法的 HTML

HTML
<div id="staticPart">Here is static part of page
<button id="btn" onclick="refresh()">Start refreshing (2s)</button>
</div>

<div id="dynamicPart">Dynamic part</div>

這是我在 Html 中的表格

<div class='d-flex justify-content-center' id="contentTable">
            <table class='table table-stripped' border=1 id="table">
                <thead class= 'thead-dark'>
                    <tr>
                        <th>#</th>
                        <th>Fecha</th>
                        <th>Documento</th>
                        <th>Nombres</th>
                        <th>Apellidos</th>
                        <th>Sede</th>
                        <th>Siglas</th>
                        <th>Administrador</th>                        
                        <th>Acciones</th>                        
                    </tr>
                </thead>
                <tbody>
                    <a href="/Jomar/users_control/controller/ControlAsisController.php?action=todos"></a>
                    <?php
                        for($i = 0; $i < count($datos); $i++){
                            $id = $datos[$i]['id_controlAsis'];
                            $rutaEd = "/Jomar/users_control/controller/ControlAsisController.php?action=editar&id_controlAsis=$id";
                            $rutaEl = "/Jomar/users_control/controller/ControlAsisController.php?action=eliminar&id_controlAsis=$id";
                            echo "<tr>";
                            echo "<td>". ($i+1) ."</td>";
                            echo "<td> {$datos[$i]['fecha']} </td>";
                            echo "<td> {$datos[$i]['documento']} </td>";
                            echo "<td> {$datos[$i]['nombres']} </td>";
                            echo "<td> {$datos[$i]['apellidos']} </td>";
                            echo "<td> {$datos[$i]['sede']} </td>";
                            echo "<td> {$datos[$i]['siglas']} </td>";
                            echo "<td> {$datos[$i]['administrador']} </td>";                            
                            echo "<td>
                            <a href='$rutaEd' class='badge badge-primary'>Editar </a>
                            <a href='$rutaEl' class='badge badge-warning'>Eliminar </a>
                            </td>";
                            echo "</tr>";
                        }

                    ?>
                </tbody>
            </table>
        </div>

感謝您的幫助，對不起我的英語

Answer 1

做出很多假設。 在使用它們之前，您需要定義 'btn' 和 'dynamicPart' 變量。

例子：

let btn = document.querySelector("#id_of_some_button_in_html");
let dynamicPart = document.querySelector("#id_of_a_div");

然后你只需要打電話

refresh();

那么

setTimeout(refresh,2000);

的代碼將每 2 秒運行一次。

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
      let btn = document.querySelector("#id_of_some_button_in_html");
      let dynamicPart = document.querySelector("#id_of_a_div");

      btn.style.visibility= "hidden";
      dynamicPart.innerHTML="Loading..."
      dynamicPart.innerHTML=await(await fetch(url)).text();
      setTimeout(refresh,2000);}

refresh();

理解這一點不被認為是“好”代碼，但我假設您剛剛開始學習 JS 並且這段代碼不會投入生產。