Javascript 将页面上的文本从多个下拉列表更改为SQL结果_Javascript_Jquery_Html_Sql_Ajax

Javascript 将页面上的文本从多个下拉列表更改为SQL结果

javascript jquery html sql ajax

Javascript 将页面上的文本从多个下拉列表更改为SQL结果,javascript,jquery,html,sql,ajax,Javascript,Jquery,Html,Sql,Ajax,我有一个SQL表，如下所示： Name │ Favorite Color │ Age │ Pet ────────┼────────────────┼───────┼─────── Rupert │ Green │ 21 │ Cat Mike │ Red │ 19 │ Dog Rachel │ Purple │ 24 │ Cat Thomas │ Red │ 21

我有一个SQL表，如下所示：

  Name  │ Favorite Color │  Age  │  Pet
────────┼────────────────┼───────┼───────
 Rupert │     Green      │  21   │  Cat
  Mike  │      Red       │  19   │  Dog
 Rachel │     Purple     │  24   │  Cat
 Thomas │      Red       │  21   │  Fish
  ...   |      ...       |  ...  |  ...

和两个下拉列表：

<select>
    <option selected="selected" disabled="disabled">Choose Pet</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<select>
    <option selected="selected" disabled="disabled">Choose Color</option>
    <option>Red</option>
    <option>Green</option>
    <option>Purple</option>
</select>

我真的没有这方面的计划，我有点卡住了。我该怎么办？需要注意的是，理想情况下，我希望通过SQL获取信息，而不是将其硬编码到页面中，因此，如果一个人的姓名发生了更改，则无需重写任何内容

$name = $db->prepare("
    SELECT name
        FROM people
        WHERE color = :col
        AND pet = :pet
");
$name->execute(array(
    ':col' => some value from one dropdown
    ':pet' => some value from another dropdown
));

下面是一个SQL查询，它将在下拉列表更改时执行，例如，这意味着名称的实际值无关紧要，因为它将获取给定组合的正确值。

如果数据集保持当前的大小，然后，您可以获取行并从中组成一个json对象并将其嵌入到页面中，然后您可以让javascript查找选择并相应地更改名称

但是，如果您认为行会增长到太多而无法嵌入页面，那么正如您所说的，您可以实现远程搜索并将选择发送到php脚本，然后php脚本将返回名称

对于第一种方法，您可以：

JSON

然后，您最好为选择项提供一个id，以便于获取其值：

加价

在后端，当为页面提供服务时，您可以像这样解析json对象：

整篇


...
谢谢这给了我一个很好的基本方法。好奇的是：如果宠物的名字和颜色的名字是动态的（比如它们可以通过SQL改变），这种方法就不起作用了，因为它们的组合基本上是硬编码的。有没有一种方法可以让JSON与SQL接口，这样我就可以将第一段代码初始化为SQL中的元素？@riista好吧，假设您在页面加载时使用DB表的内容构建JSON对象。如果您担心在用户加载页面后它们会被更改，那么您必须使用远程搜索方法，但是如果数据没有那么易变并且只是偶尔更改，那么您可以假设用户拥有过时数据的可能性不高（假设有人连续几天没有打开选项卡）。
$name = $db->prepare("
    SELECT name
        FROM people
        WHERE color = :col
        AND pet = :pet
");
$name->execute(array(
    ':col' => some value from one dropdown
    ':pet' => some value from another dropdown
));

var selections = {
  'Cat-Green': 'Rubert',
  'Dog-Red': 'Mike',
  ... 
};

<select id="pet" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Pet</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<select id="color" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Color</option>
    <option>Red</option>
    <option>Green</option>
    <option>Purple</option>
</select>

<span id="result"></span>

function update() {
  var key = $("#pet").val() + '-' + $("#color").val();
  $("#result").text(selections[key]);
}

<?php
// create your db link, then
$query  = "SELECT * FROM `favorites` LIMIT 50"; // just in case
$result = mysqli($link, $query);
$array  = array(); // empty array to be filled with data
while($row=mysqli_fetch_assoc($result)) {
  // Name  │ Favorite Color │  Age  │  Pet
  $array[$row['Pet'] . '-' . $row['Color']] = $row['Name'];
}
$json = json_encode($array); // convert array to json string
// we are done. Next we close PHP and start outputing HTML, JS and our JSON
?>
<!DOCTYPE html>
<html>
<head>
  ...
  <script src=" ... remember to add jquery ... ></script>
  <script>
    var selections = <?php echo $json; ?>;
    ...
    function update ...
  </script>
</head>
<body>
  <select id="pet" onchange="update();">
  ...
</body>
</html>