使用 Ajax 和 jQuery 填充引导表答案

【问题标题】：Populate bootstrap table using Ajax & jQuery使用 Ajax 和 jQuery 填充引导表
【发布时间】：2018-06-14 11:18:01
【问题描述】：

这是我目前的设置：

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

mysql表：

现在，当在我的 JS 中执行一个函数时，我只想用我的数据库中的某些数据填充 Bootstrap 表。执行此操作的最佳方法是什么？

【问题讨论】：

使用 AJAX 通过您的服务器支持的任何服务器端代码从您的 mySQL 表中检索数据。如果您花时间搜索，已经有 数以千计的问题和教程与此相关。

标签： javascript jquery mysql ajax twitter-bootstrap

【解决方案1】：

您可以使用 jquery 动态创建一个 tr 元素并将其附加到每行数据的 tbody 或复制现有的 tr，修改数据并将其附加到 tbody。

我使用 ajax 获取 Wikipedia 搜索结果并在此 codepen 中使用 jquery 创建动态行：https://codepen.io/Gander7/pen/jYMMqg 向下滚动到 $("#box").keypress 部分。

编辑

因为服务器端语言是 PHP。需要有一个返回 JSON 的服务器端端点（URL / 路由 / 任何你想调用的）。查看如何使用this question 执行此操作。您可以使用其他格式，但 JSON 是 javascript 的原生格式，而且 IMO 是最常见且最容易使用的格式之一。我的 codepen 示例使用现有的 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

【讨论】：

我现在正在调查这个问题，只有一个问题：我基本上从来没有在我的代码中处理过 JSON，当你在 ajax 调用中输入数据类型为“jsonp”时，你做了什么服务器-side 让这成为可能？
当用户用页面调用url时，可以用html传递数据。我使用“jsonp”是因为现在 codepen 不喜欢“json”。如果要通过按钮单击或计时器刷新页面上的数据，请使用 ajax。如果您只需要调用页面时的数据，则将数据与页面一起传递。
好吧，是的，我想使用 Ajax，因为数据将在用户交互之后显示。我只是看不到这里的一切将如何联系在一起。我想我已经解决了 JS 和 Ajax 部分的问题（使用数据类型 JSON），但我非常不确定如何在 PHP 中处理事情。到目前为止，我已经准备好查询（SELECTnation_name FROM countries WHERE queue IS NOT NULL ORDER BY queue ASC），但不确定如何处理结果。
您需要一个端点（url），它只以 json 格式（无页面）返回数据，然后将其作为 ajax 调用中的 url。查看如何将对象转换为 json 并返回 here