javascript - 使用 PHP 进行 MySQL 查询并将数据发送到 JavaScript

Question

编辑:

我输入了一个带有 ID 的号码。在 MySQL 数据库中，我有一个表，其中包含所有 ID 以及该 ID 之间用逗号分隔的选项列表。

我将以其中一条数据库记录为例:id 为“ham_and_cheese”，选项为“蛋黄酱、沙拉奶油、酸辣酱、无调料”。假设该人在 ID 为“ham_and_cheese”的数字输入中选择 1。

然后，将出现 1 个下拉列表，其中包含以下选项:“蛋黄酱、沙拉奶油、酸辣酱、无调料”(每个选项都有自己的选项)。如果他们选择 2，则会出现 2 个下拉菜单，然后出现 3 个，然后出现 3 个，依此类推。

我对 Ajax 非常陌生，所以如果有人能帮助我那就太好了。

我的新代码:

...

<td><input type='number' min='0' max='5' name='ham_and_cheese_amount' /></td>

...

<td id='ham_and_cheese_dressing'></td>

...

function changeDropdown(name, amount){

    //Gets the id.
    var newName = name.replace("_amount", "");

    //Gets the div that the drop down will go in.
    var el2 = document.getElementById(newName + "_dressing");

    //If number 0 is selected in number input.
    if(amount == 0){
        el2.innerHTML = "";
    }

    //If number 1 is selected in number input.
    if(amount == 1){
        var html = "<select>";
        var id = newName;
        $.ajax({
            url: 'updateDropdown.php',
            dataType: 'json',
            data: {'option_id':id},
            type: 'get',
            success: function(r){
                for(i = 0; i < r.length; i++){
                    // I use r[i].toLowerCase().replace(" ", "_") to convert "Salad Cream" to the id "salad_cream", etc.
                    html += "<option value='" + r[i].toLowerCase().replace(" ", "_") + "'>" + r[i] + "</option>";
                }
                html += "</select>";
                el2.innerHTML = html;
            }
        });
    }

}

我的updateDropdown.php:

<?php

    include "/home/pi/config.php";
    $id = $_GET['option_id'];
    //I know that the connect works because I use the same code for other queries.
    $connect = mysqli_connect("localhost", $name, $pass, "items");
    if(mysqli_connect_errno()){
        return "Failed to connect to products database!";
    }
    $result = mysqli_query($connect, "SELECT options FROM products WHERE id='$id' LIMIT 1");
    $resultArray = explode(", ", mysqli_fetch_row($result)[0]);

    return json_encode($resultArray);

?>

Answer 1

Ajax 是您在后端和前端之间获取信息的方式。

$.ajax({                                                                            
                        url: "/url/of/php/page/that/echos/json/results",
                        data: "post variables to send",
                        type: "POST",
                        error: function(XMLHttpRequest, textStatus, errorThrown)  {
                            alert("An error has occurred making the request: " + errorThrown);
                        },
                        success: function(){
                            //do stuff here
                        }
                    });

只需构建一个 PHP 页面，仅回显 json_encoded 的查询结果，而不向 UI 发送任何其他内容。