使用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表格

回答

相关问题