Question

我在线搜索我的问题，发现这最接近我的查询。 How to refresh a div?

但我仍无法找到查询的解决方案。我的查询是我的代码

    <h1>Time</h1> 
    <input type="text" value="0.0" id="time">
    <button id="FormSubmit">Submit</button>
    <img src="loading.gif" id="LoadingImage" style="display:none" />
    <table id="responds" >
        <tr>
            <th>Time</th>
        </tr>
        <?php
            $results = $mysqli->query("SELECT * FROM time ORDER BY time");
            //get all records from add_delete_record table
            while($array = $results->fetch_assoc()) {
        ?>
            <tr id="item_<?php echo $array["id"] ?>">
                    <td><?php echo $array['time']?>
                    <a href="#" class="del_button" id="del-<?php echo $array["id"] ?>">
                        <img src="icon_del.gif" />
                    </a>
                </td>
            </tr>
        <?php }
        ?>
    </table>

我希望每隔30秒再次重新加载此表。我在使用jquery时非常天真，而且我没有任何脚本文件来从服务器获取数据。由于某些其他原因，我不想将数据库代码放在其他文件中。我怎么能这样做？

下面是一些与表格相关的代码。

    $("#FormSubmit").click(function (e) {
                e.preventDefault();
                if($("#time").val()==='') {
                    alert("Please enter some text!");
                    return false;
                }   
                $("#FormSubmit").hide(); 
                $("#LoadingImage").show(); 

                var myData = 'content_txt='+ $("#time").val(); 
                jQuery.ajax({ 
                    type: "POST", 
                    url: "time.php", 
                    dataType:"text", 
                    data:myData, 
                    success:function(response){
                        $("#responds").append(response);
                        $("#contentText").val(''); 
                        $("#FormSubmit").show(); 
                        $("#LoadingImage").hide(); 

                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        $("#FormSubmit").show(); 
                        $("#LoadingImage").hide(); 
                        alert(thrownError);
                    }
                });
            });

            $("body").on("click", "#responds .del_button", function(e) {
                e.preventDefault();
                var clickedID = this.id.split('-'); 
                var DbNumberID = clickedID[1]; 
                var myData = 'recordToDelete='+ DbNumberID; 

                $('#item_'+DbNumberID).addClass( "sel" ); 
                $(this).hide(); 

                jQuery.ajax({
        type: "POST",
        url: "time.php", 
        dataType:"text", 
        data:myData, 
        success:function(response){ 
                        $('#item_'+DbNumberID).fadeOut();
        },
        error:function (xhr, ajaxOptions, thrownError){ 
                        alert(thrownError);
        }
                });
            });

Answer 1

您可以使用AJAX更新html表的结果，如下所示：

         $.ajax({
            type: "POST",
            url: "controller.php",  //php controller fecthing the info
            data: {
                param1: p1,
                param2: p2         // controller params               
            },            
            success: function(data) {                    
                if (data != null){
                  $("#yourTableID").html(data);   //update table html
                }else{
                  alert('No results found!');
                }
            }
          });

Answer 2

如果您将表的内容保存在单独的php文件中：

    // tablebody.php
    //
    <tr>
        <th>Time</th>
    </tr>
    <?php
        $results = $mysqli->query("SELECT * FROM time ORDER BY time");
        //get all records from add_delete_record table
        while($array = $results->fetch_assoc()) {
    ?>
        <tr id="item_<?php echo $array["id"] ?>">
                <td><?php echo $array['time']?>
                <a href="#" class="del_button" id="del-<?php echo $array["id"] ?>">
                    <img src="icon_del.gif" />
                </a>
            </td>
        </tr>
    <?php }
    ?>

然后在你的html文件中，你可以使用jquery将该文件加载到表中：

<table id="responds">
</table>

<script>
    $(document).ready(function() {
        $("#responds").load("tablebody.php");
    });
</script>

为了有效地使用这种方法，您可能需要对代码进行一些重构，但它可以解决您的问题。

Answer 3

您可以返回使time.php返回带有表格中项目集合的JSON：

// Append the following to time.php
$data = array();
$results = $mysqli->query("SELECT * FROM time ORDER BY time");
//get all records from add_delete_record table
while($array = $results->fetch_assoc()) {
    $data[] = array('id' => $array['id'], 'time' => $array['time']);
}
echo json_encode( $data );

然后，调用此脚本：

jQuery.ajax({ 
    type: "POST", 
    url: "time.php", 
    dataType:"json",  // INSTEAD OF text
    data: {
         content_txt: $("#time").val()
    }, 
    success:function(response) {
        var $table = $("#responds").html('<tr><th>Time</th></tr>'); // RESET THE TABLE
        for( var i = 0; i < response.length; i++) {
            // Append the new rows to the table, based on the data returned from the server
            $table.append('<tr id="item_' + response[i].id + '>' +
                '<td>' + response[i].time + '>' +
                    '<a href="#" class="del_button" id="del-' + response[i].id + '>' +
                        '<img src="icon_del.gif" />' +
                    '</a>' +
                '</td>' +
            '</tr>');
        }
        // The following lines are commented-out because this runs in the background and only update the content of the table
        // $("#contentText").val(''); 
        // $("#FormSubmit").show(); 
        // $("#LoadingImage").hide(); 
    },
    error:function (xhr, ajaxOptions, thrownError){
        $("#FormSubmit").show(); 
        $("#LoadingImage").hide(); 
        alert(thrownError);
    }
});

您可以将此脚本放在setInterval内并每隔30秒运行一次（Interval以毫秒为单位，因此它应为30000）：

setInterval(function(){ 
  // The above code goes here 
}, 30000);

如何使用jquery刷新表

3 个答案: