表不刷新异步AJAX，JQuery和PHP

问题描述：

我想添加一个新的行到现有的表使用Ajax，PHP和JQuery。 Ajax调用成功（通过发出警报进行测试）。但是，只有在刷新整个页面时才会显示新行。我希望在刷新整个页面的同时将行添加到表中，但只需要在表中刷新表即可。表不刷新异步AJAX，JQuery和PHP

示例：当我按下表格上的Add按钮时，它应该在表格中随时添加一个新行。

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>

我认为问题可能如此简单。 '$（“＃hottopics_table tbody”）。append（data）;'你确认ajax正在返回你想要的行吗？ – Shriike 2014-10-27 13:41:12

如果AJAX调用成功，唯一重要的是它处理的方式。你可以省去所有的PHP，并且给我们1）处理响应以添加行的函数和2）该函数的精确*输入（AJAX请求的结果）。所有这些PHP代码都没有帮助，应该删除，除非错误在那里。提示：大多数浏览器都包含开发人员工具（F12），可让您调试JavaScript或至少查看错误消息。 – GolezTrol 2014-10-27 13:41:25

GET请求从缓存中拉出。 – epascarello 2014-10-27 13:43:18

答

$(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

相关推荐