使用Ajax和jQuery填充引導表

Question

這是我當前的設置：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nation</th>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

mysql表：

現在，當在我的JS中執行一個函數時，我只想用我數據庫中的某些數據填充Bootstrap表。 執行此操作的最佳方法是什么？

Answer 1

您可以使用jquery動態創建一個tr元素，然后將其添加到每行數據的tbody中，或者復制一個現有的tr，修改數據，並將其添加到tbody中。

我使用ajax獲取Wikipedia搜索結果，並在此Codepen中使用jquery創建動態行： https ://codepen.io/Gander7/pen/jYMMqg向下滾動至$("#box").keypress部分。

編輯

因為服務器端語言是PHP。 必須有一個返回JSON的服務器端終結點（URL /路由/任何您想調用的終結點）。 看看如何解決這個問題 。 您可以使用其他格式，但是JSON是javascript固有的，並且IMO是最常見且最容易使用的格式之一。 我的代碼筆示例使用現有的Wikipedia URL作為端點。 如果您使用該URL並將其放入瀏覽器地址欄中，則會得到JSON結果。 您可以用相同的方式測試您的端點。

即。 例如，將其放在瀏覽器中： https : //www.mediawiki.org/w/api.php?action=query&format=json&prop=info&list=search&titles=Main%20Page&inprop=url%7Cdisplaytitle%7Cpreload&srsearch=javascript