Question

修改

我有一个带有ID的数字输入。在MySQL数据库中，我有一个包含所有ID的表和一个用逗号分隔的选项列表。

我将以其中一个数据库记录为例：id为“ham_and_cheese”，选项为“Mayonnaise，Salad Cream，Chutney，No Dressing”。假设此人在输入的数字上选择1，ID为“ham_and_cheese”。

然后，将出现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

jquery：

<script type="text/javascript"> 
    $(document).ready(function () {
        var html = "<select>";
        var id = $('#idselecter').val();// ham_and_cheese
        $.ajax({
            url: "the/php/page",
            dataType: 'json',
            data : {'option_id':id},
            type: 'get',
            success: function (r) {
                for (i = 0; i < r.length; i++) {
                    html += "<option>" + r[i] + "</option>";
                }
                html += "</select>"
                $('body').append(html);// or $('#anydivid').append(html);
            }
        });
    });
</script>

你必须在php文件中使用json_encode($resultArray)返回json。 $resultArray应该是一个索引数组。

php代码：

$id = $_GET['option_id'];

// Selection query

$result = mysqli_query($connect, "SELECT options FROM products WHERE id='$id' LIMIT 1");

$resultArray = explode(", ",  mysqli_fetch_row($result)[0]);
echo json_encode($resultArray);

Answer 2

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的查询结果，其他任何内容都不会发送到用户界面。

Answer 3

我知道这似乎有点偏离主题，但根据我对OP的理解，目标是关于他想要做什么。

只需在谷歌搜索AJAX链选择，您就会找到一个可以引导您朝着正确方向前进的工作示例。如果您需要进一步的帮助，请发表评论，我可以引用一个有网站的网站。

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

3 个答案: