使用 Ajax 和 jQuery 填充引导表

Posted 2023-02-24

【中文标题】使用 Ajax 和 jQuery 填充引导表

【英文标题】：Populate bootstrap table using 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 表中检索数据。如果您花时间搜索，已经有 数以千计的问题和教程与此相关。

【参考方案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