Question

我正在尝试使用Ajax，PHP和Jquery向现有表添加新行。 Ajax调用成功（通过发出警报进行测试）。但只有刷新整个页面时它才会显示新行。我希望将行添加到表中而不刷新整个页面，但只需动态刷新表。

示例：当我按下表格上的“添加”按钮时，它应该动态地向表中添加一个新行。

hotTopics_focusAreas_data.php文件：

<?php
$SQL = "select * from hottopics order by id desc limit 1";


while($row = mysql_fetch_array($SQL,MYSQL_ASSOC)) {
            echo 
          "<tr>
            <td id=title:".$row['id']." contenteditable='true'>".$row['title']."</td>


            <td id=status:".$row['id']." contenteditable='true'>".$row['status']."</td>

            <td><button type='button' class='btn btn-danger'>Delete</button></td>
            </tr>";

    }
?>

Javascript文件：

$("document").ready(function() {

hotAddClicked();

});

function hotAddClicked(){
$("#hotadd_clicked").click(function(e) {

        endpoint = 'hotTopics_focusAreas_data.php?role=add';

    $.ajax({
        url : endpoint,
        type : "GET",
        async : true,
        success : function(data) {

            $("#hottopics_table").append(data);

        }
    });


    });
}

表格定义：

      <table class="table" id="hottopics_table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>

      <?php    

  $SQL = "select * from hottopics;";
  $result_update = mysql_query($SQL) or die("Couldn't execute query.".mysql_error());
    while($row = mysql_fetch_array($result_update,MYSQL_ASSOC)) {

          echo 
          "<tr>
            <td id=title:".$row['id']." contenteditable='true'>".$row['title']."</td>


            <td id=status:".$row['id']." contenteditable='true'>".$row['status']."</td>

            <td><button type='button' class='btn btn-danger'>Delete</button></td>
            </tr>";
        }

        ?>

        </tbody>
      </table>

Answer 1

  $(document).ready(function() {

    $("#hotadd_clicked").click(function(e) {

            endpoint = 'hotTopics_focusAreas_data.php?role=add';

        $.ajax({
            url : endpoint,
            type : "GET",
            async : true,
            success : function(data) {

                $("#hottopics_table tbody").append(data);

            }
        });


        });

    });

检查此jQuery脚本并检查它是否正常工作。

表不会异步刷新AJAX，JQuery和PHP

1 个答案: