使用Jquery＆ajax更新HTML表格

我想更新表格數據，而無需使用Ajax和Jquery刷新頁面。使用Jquery＆ajax更新HTML表格

我知道我需要setInterval()方法，因爲我想要刷新所有用戶的表，因爲多個用戶可以將數據插入到數據庫中，並且我想將表更新爲每個用戶。

我已經創建了一個腳本來發送表單中的數據，而無需重定向用戶或刷新頁面，然後將其插入到數據庫中。

MyScript.js

$(document).ready(function() { 
    console.log("Ready!"); 
    //Submitting from data 
    $("#submitForm").submit(function(e){ 
     if($('#fName').val() && $('#lName').val() && $('#nickname').val()) { 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       data: $("#submitForm").serialize(), 
       success: function(data){ 
        console.log(data); // show response from the php script. 
       } 
      }); 
     } 
     else { 
      alert("Please fill the fields.") 
     } 
     e.preventDefault(); 
    }); 
});

在我process.php文件我的數據插入到數據庫。

現在我有info.php文件生成我的表與所有的數據，我有一個窗體那裏插入新的數據。

<div id="table" class="col-md-7 ml-5"> 
    <table class="table table-striped table-bordered table-hover table-sm"> 
    <thead class="thead-default"> 
     <tr> 
     <th>#</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Nickname</th> 
     <th>User ID</th> 
     </tr> 
    </thead> 
    <?php $user->showUsers(); ?> 
    </table> 
</div>

showUsers()函數只是用SQL中的數據生成表的其他行。

我不知道如何使用Jquery和Ajax刷新表。
我試圖使用方法，但它也爲我的表單生成html。

請幫忙。

來源

2017-03-11 John Smith

你實際上可能是過度思考的問題。您在AJAX後端上所需的全部內容是生成一個數據結構（如JSON格式），並將其傳遞迴頁面本身。頁面上的jQuery代碼本身應該處理如何將新行插入到預先存在的表中。 – Terry

正如你所說，你可以使用setInterval的或更好的setTimeout因爲你想要的數據的迴歸引發新的請求後

var tId=""; 
function getInfo() { 
    $.get("info.php #table",function(data) { 
    tId = setTimeout(getInfo,60000); 
    $("#someContainer").append(data); 
    }); 
} 
getInfo();

來源

2017-03-11 20:11:36 mplungjan

你好，我試過你的代碼片斷，但是它從'info.php'生成了整個HTML代碼，並且在那個文件中我有很多HTML元素，它不僅僅是我有表格和div的表格。它把所有HTML內容都放到我定位的div中。我可以以某種方式獲取我所擁有的表格中的div的HTML內容，並在目標div中顯示該HTML。 –

你的意思是$ .get（「info.php＃table」 – mplungjan

@mlungjan 是的，我嘗試了'$ .get（「info.php＃table」）'但它仍然得到所有的html，而不是html在ID爲「表格」的div內部 –

使用Jquery＆ajax更新HTML表格

回答

相關問題