通过从 javascript 文件中查询数据库，根据下拉菜单中的选择更新 div 内容

Posted 2023-02-24

【中文标题】通过从 javascript 文件中查询数据库，根据下拉菜单中的选择更新 div 内容

【英文标题】：Updating div content based on a selection from a drop down menu by querying a database from a javascript file

【发布时间】：2020-03-18 22:30:15

【问题描述】：

我之前回答了一个问题here，这是一个巨大的帮助，涉及使用基于 mysql 数据库的下拉选择的 ajax 更改内容。

我现在需要用下拉菜单中所选选项所在行的值填充编辑后 div 的内容。

为了做到这一点，似乎唯一的方法是从我的 js 文件中查询，而唯一的方法是通过 nodejs 或进一步的 ajax。我已经尝试了两种方式，但由于我使用 cpanel 托管站点，nodejs 被证明很困难。 Ajax 将是执行此操作的好方法，但我需要在查询中包含 WHERE cModel = '$cModel' 以便检索正确的值，显然当我获取php 脚本来自一个单独的文件。

如果我遗漏了一些重要细节，我深表歉意，这一直在我脑海中挥之不去，我想看看是否有更简单的方法来做到这一点。谢谢！

HTML & PHP 用于一个下拉框：

<form id="parts">
        <fieldset>
            <legend>Choose your parts</legend>
            Any parts marked with * are required<br/><br/>
            <label for="CPU">CPU*</label><br/>
            <?php
                $cresult = $mysqli->query("SELECT * FROM pCpu ORDER BY cModel asc");
            ?>
                <select id="CPU" name="CPU" onchange="myUpdateFunc()">
                <option value="" disabled selected>Select your Part</option>
                <?php
                while ($rows = $cresult->fetch_assoc()) 
                    $cmodel = $rows['cModel'];
                    echo "<option value='$cmodel'>$cmodel</option>";

                

                ?>
                </select>

                <br/>

                <div id="divResults">

                </div>
                <br/><br/>

JS：

function myUpdateFunc()

    var mySelected = $("#CPU").find("option:selected").val();

    $('#divResults').html ('CPU Model: ' + mySelected + '<br/> CPU Socket: ')

【参考方案1】：

AJAX 绝对是要走的路。调用 PHP 脚本并将其传递给cModel。

function myUpdateFunc()

  var mySelected = $("#CPU").find("option:selected").val();
  $.ajax(
    url: "searchCPU.php?cmodel=" + mySelected, 
    success: function(result)
    $('#divResults').html ('CPU Model: ' + result + '<br/> CPU Socket: ')
     
  );

searchCPU.php

<?php
    $cmodelParam = $_GET['cmodel'];
    $cresult = $mysqli->query("SELECT * FROM pCpu WHERE cModel = $cmodelParam");
    //assuming it returns a single row for simplicity
    $row = mysqli_fetch_assoc($cresult);
    echo $row['cModel'];
?>

显然你可以做更多的错误检查，这对SQL injection是开放的。您应该始终使用prepared statements。我没有改变它来简单地回答你的问题，让你自己解决这些问题。

【讨论】：

非常感谢！多年来一直试图弄清楚这一点。你救了我很多进一步的心痛。肯定需要进一步研究 php、JS 和 ajax 是如何集成的，还是很新的。

任何网站都只是 HTML、javascript 和 CSS。它们都可以在一个 .html 文件中。您可以制作任何漂亮的网页并将其保存为计算机上的 HTML 文件，然后网络浏览器会将其拉出。 PHP 只是在 HTML 发出之前“编写”脚本，从而使您的网页动态化。网站的任何服务器端语言都以这种方式工作。

是的，我使用标准 html + css 已经有一段时间了，我只是 php 和 js 某些方面的新手。再次感谢您的帮助！