Question

免责声明：我尝试查看其他示例，但是每个示例都使用.php，而我的类却不是。我试图从我的MySQL服务器中获取值并将其插入到我的html代码中。我不能使用.php。

这是我的HTML脚本示例：

<script>
        console.log("first script test");
        function processForm() {

        let sqlStmt = "";

        sqlStmt = "SELECT * FROM `Product-Service`";
        sqlCost = "Select cost FROM `Product-Service`";
        sqlName = "Select name FROM `Product-Service`";
        sqlDesc = "Select description FROM `Product-Service`";
        console.log("2nd script test");

        MySql.Execute(
            "host", 
            "user",
            "pw",
            "db",
            sqlDesc,
            function (data) {

              document.getElementById("output").innerHTML = data;
              //console.log("data parameter: " + data);

              var dataAsString = JSON.stringify(data);
              document.getElementById("output").innerHTML = dataAsString;

              //console.log("Single row as obj: " + data.Result[0]);
              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              //console.log("Single row, single column: " + data.Result[0].name);
              document.getElementById("basic").innerHTML = JSON.stringify(data.Result[0]);
              console.log(data.Result[0])

              document.getElementById("intermediate").innerHTML = JSON.stringify(data.Result[1]);

              document.getElementById("advanced").innerHTML = JSON.stringify(data.Result[2]);

            }
        );
    }

    </script>

我正在尝试使用1个带有3个选项的下拉框：

<div class="output" onload="processForm()">
        <h2><u>Products and Services</u></h2>
        <h4><select>
        <!-- <input type="button" value="test button" onclick="processForm()"> -->
        <p>Car Detailing options</p>
        <option onclick="" value="basic">Basic</option> 
        <option value="intermediate">Intermediate</option> 
        <option value="advanced">Advanced</option> 
            </select>
        <p>Description: </p>
        <p></p>
        <p></p>
        <p></p>
        </h4>
    </div>

使用上述脚本，我已经可以从数据库中获取项目以显示在页面上，但是我很难将它们放入选项框（我只是对其进行了硬编码），以及填充<p>Description: </p>每次下拉框更改时都带有说明。

感谢任何帮助。

Answer 1

对于任何希望在HTML文件中完成此操作且没有.php的人，我有些顿悟，并使用以下代码将其工作：

window.onload = function getData() {
            sqlAll = "Select * FROM `Product-Service`";
            var a = document.getElementById("dropdown");
            var x = document.getElementById("Desc");
            var y = document.getElementById("Cost");
            var taxElem = document.getElementById("Tax");
            var procElem = document.getElementById("Processing");
            var totalElem = document.getElementById("Total");
            var pic = document.getElementById("picInsert");

            MySql.Execute(
                "host", 
                "user",
                "pw",
                "db",
                sqlAll,
                function (data) {

              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              document.getElementById("basicList").innerHTML = (data.Result[0].Name);
              document.getElementById("intermediateList").innerHTML = (data.Result[1].Name);
              document.getElementById("advancedList").innerHTML = (data.Result[2].Name);

这是从表中获取所有值，并通过特定值插入它们，如此处所示：(data.Result[2].Name)

数据库中的值显示在一个下拉框中：

<select id="dropdown">
        <option value="empty"></option>
        <option id="basicList" value="0"></option> 
        <option id="intermediateList" value="1"></option> 
        <option id="advancedList" value="2"></option>
            </select>

最后，我使用if / else语句显示我想要的内容：

a.addEventListener('change', function(){
                if (a.value == 0){
                    cost = 59.99;
                    tax = cost * .07;
                    processing = cost * .01;
                    total = cost * 1.08;
                    document.getElementById("Desc").innerHTML = (data.Result[0].Description);
                    document.getElementById("Cost").innerHTML = ("Price: " + data.Result[0].Cost);
                    //taxElem.innerHTML = "Tax: " + tax.toFixed(2);
                    //procElem.innerHTML = "Processing Fee: " + processing.toFixed(2);
                    totalElem.innerHTML = "Total Cost with tax(7%) and processing fee (1%): " + total.toFixed(2);
                    pic.innerHTML = "<img src=\"basic.jpg\">";

完全按照我的意愿去做。如果将来有人偶然发现此问题，请回答此问题！祝好运！

Answer 2

不要错过使用 $（document）.ready（function（）{}）; 并在导入jQuery时使用.change（）函数，以检测您的选择框更改

$( document ).ready(function() {
            $( ".selecting" ).change(function() {
               ...your js code here...
            });
        });
        
//or without impoting jquery js code:
document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById(".selecting").onchange = function(){
    ...your js code here...
 };
});

<div class="output" onload="processForm()">
        <h2><u>Products and Services</u></h2>
        <h4><select class="selecting">
        <!-- <input type="button" value="test button" onclick="processForm()"> -->
        <p>Car Detailing options</p>
        <option onclick="" value="basic">Basic</option> 
        <option value="intermediate">Intermediate</option> 
        <option value="advanced">Advanced</option> 
            </select>
        <p>Description: </p>
        <p></p>
        <p></p>
        <p></p>
        </h4>
    </div>

在<p>中获取下拉框更改值（来自MySQL）

2 个答案: