jquery tabledit 下拉菜单：是否可以从 mysql 数据库中检索值？

Question

我正在使用jquery tabledit 插件来更新数据库。与官方示例中的完全一样。

我可以成功地包含一个带有固定数量选项的静态下拉列表（在 custom_table_edit.js 中定义）。

我希望能够从数据库中动态获取这些选项，但我不知道如何自定义 custom_table_edit.js 中的代码。

我可以在 php 中使用循环查询数据库并生成 html <select> 字段来编写此代码。但我不了解 javascript，或者在这个框架中是否有可能。

这是 custom_table_edit.js 文件。下拉菜单定义为三个颜色选项。我希望动态生成此下拉列表。

// custom_table_edit.js

$('#example2').Tabledit({
    url: 'example.php',
    eventType: 'dblclick',
    editButton: false,
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'car'], [2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}']]
    }
});

我真的没有尝试过任何事情，因为我想知道在这个框架中是否可以做。

Answer 1

欢迎来到 SO，nucelar。

您所描述的是通过 JavaScript 从客户端到服务器的 HTTP 请求。这通常称为AJAX 或异步 JavaScript 和 XML。此 API 使您可以手动向服务器发送请求，并且有多种实现方式。

因为您使用的是 jQuery，所以我建议您使用 jQuery 库中包含的 $.ajax 函数。

在这里，我做了一个非常基本的示例，说明如何使用 GET 方法向服务器发送 HTTP 请求以检索一些数据。

$.ajax({
  url: 'https://yourdomain.com', // Where to send the request to. Can also be a file.
  method: 'GET', // What method of request it uses.
  success: function(data) { // When a response is succesfully received.
    // Do something with the received data.
    console.log(data); // Show what the data looks like in the console.
  },
  error: function(jqXHR, textStatus, errorThrown) { // When an error occurs while making a request.
    console.log(jqXHR, textStatus, errorThrown); // Show the error in the console.
  }
});

在您的情况下，url 属性值可能是您在其中查询数据库并返回结果的 PHP 文件的 URL，正如您所提到的，您可以这样做。

AJAX 函数的响应（存储在success 方法中的data 变量中）可以是文本，如string，如果您想发送结构化数据，甚至可以是JSON。

小心异步部分。这意味着 AJAX 代码不会停止您的 JavaScript 代码的其余部分的执行，而是会继续执行并在 HTTP 请求完成时返回。

我希望这足以让您入门。祝你好运，不要犹豫，提出问题。