表不刷新異步AJAX，JQuery和PHP

-1

我想添加一個新的行到現有的表使用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>

來源

2014-10-27 user2569524

我認爲問題可能如此簡單。 '$（「＃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腳本並檢查它是否正常工作。

來源

2014-10-27 14:41:07

表不刷新異步AJAX，JQuery和PHP

回答

相關問題