使用AJAX和PHP在单击时填充

我只有一个选项，我想使用PHP从数据库中获取其余选项，然后使用AJAX用PHP结果填充said

不幸的是，我的代码不起作用，我并不感到惊讶，因为我对AJAX和jQuery都是新手，但我没有发现任何错误来指导自己解决这个问题

PHP工作正常，因为它在网站的另一部分使用，我对它没有任何问题，所以我的错误一定是在AJAX中，这并不奇怪

下面是我的HTML：

<select class="custom-select my-1 mr-sm-2" id="producto" name="producto" required>
    <option disabled selected value>Elegir...</option>
</select>

下面是我的AJAX代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#producto").click(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
                $("#producto").append(data);
            }
        });
    });
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $(".add_field_button");
        var x = 0;
        $(add_button).click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/testground/php/fetch_lista_productos_compra.php',
                type: 'get',
                success: function(data) {
                    if(x < max_fields) {
                        x++;
                        var html = '';
                        html += '<div class="form-group row" id="inputFormRow" style="margin-bottom: 0px;">';
                        html += '<label class="col-3 col-form-label font-weight-bold">Producto</label>';
                        html += '<div class="col-7">';
                        html += '<select class="custom-select my-1 mr-sm-2" id="producto" name="producto[]" required>';
                        html += '<option disabled selected value>Elegir...</option>';
                        html += data;
                        html += '</select>';
                        html += '</div>';
                        html += '<div class="col-1 my-auto" style="padding: 0px 0px 0px 0px;">';
                        html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
                        html += '</div>';
                        html += '</div>';
                        $(wrapper).append(html);
                    }
                }
            });
        });

        $(document).on('click', '#removeRow', function () {
            $(this).closest('#inputFormRow').remove(); x--;
        });
    });
</script>

下面是我的PHP代码：

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}
?>

一如既往，我们非常感谢您的帮助，感谢您抽出时间

重要编辑

有一个重复的身份证，也许我应该从一开始就说明这一点，因为我知道我认为这是导致我的问题的原因

---

事实上，在这种情况下，选择是根据用户请求动态创建的。他们单击Add product（添加产品）并创建一个新的可选产品，我知道所述输入的id/名称必须有[]id=producto[]才能转换为数组，但我不知道如何让AJAX处理这个动态创建的重复选择问题。我为迟到的道歉，我现在意识到这是最重要的。

您必须编辑以下回复：

<script type="text/javascript">
$(document).ready(function() {
    $("#producto").change(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
               console.log(data)
// $("#producto").append(data);
            }
        });
    });
});
</script>`enter code here`

try run this and check in your console that weather you are receiving the data from your php or not.

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}
?>

测试结果：

$'selectoptions'.focusfunction{ alertHello这是一个选择触发器； }; 测验

---

您必须编辑以下内容的回复：

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}
?>

测试结果：

$'selectoptions'.focusfunction{ alertHello这是一个选择触发器； }; 测验

---

请不要在服务器上构建您的html，尝试只发送原始数据，然后构建html客户端，这样做更好，它为以后更改视图留下了空间，没有太多耦合

也就是说，与其做：

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}

然后在客户端

$.ajax({
    url: 'fetch_lista_productos_compra.php',
    type: 'get',
    success: (data /*json-like string*/) => {
        const dataAsArray = JSON.parse(data);

        $.each(dataAsArray, (index, row) => {
             //now HERE you construct your html structure, which is so much easier using jQuery
            let option = $('<option>');
            option.val(row.titulo).text(row.titulo);
            $("#producto").append(option);
        });
    }
});

添加产品 伊莱吉尔。。。

---

-> 请不要在服务器上构建您的html，尝试只发送原始数据，然后构建html客户端，这样做更好，它为以后更改视图留下了空间，没有太多耦合

也就是说，与其做：

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}

然后在客户端

$.ajax({
    url: 'fetch_lista_productos_compra.php',
    type: 'get',
    success: (data /*json-like string*/) => {
        const dataAsArray = JSON.parse(data);

        $.each(dataAsArray, (index, row) => {
             //now HERE you construct your html structure, which is so much easier using jQuery
            let option = $('<option>');
            option.val(row.titulo).text(row.titulo);
            $("#producto").append(option);
        });
    }
});

添加产品 伊莱吉尔。。。

---

-> 事实证明问题中的代码实际上工作正常，问题不在于代码本身，而在于事实，正如我在后来的编辑中所说的，而且不是从问题的一开始就很遗憾地指出的那样，有多个代码使用相同的id，因此每次执行AJAX时，结果只会附加到第一个代码上，每次我点击它时，它都会被一次又一次地追加，我的解决方案是将填充的AJAX和创建上述动态的jQuery统一在一起，从而一次解决了我的所有问题

下面是我的jQuery/AJAX代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#producto").click(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
                $("#producto").append(data);
            }
        });
    });
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $(".add_field_button");
        var x = 0;
        $(add_button).click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/testground/php/fetch_lista_productos_compra.php',
                type: 'get',
                success: function(data) {
                    if(x < max_fields) {
                        x++;
                        var html = '';
                        html += '<div class="form-group row" id="inputFormRow" style="margin-bottom: 0px;">';
                        html += '<label class="col-3 col-form-label font-weight-bold">Producto</label>';
                        html += '<div class="col-7">';
                        html += '<select class="custom-select my-1 mr-sm-2" id="producto" name="producto[]" required>';
                        html += '<option disabled selected value>Elegir...</option>';
                        html += data;
                        html += '</select>';
                        html += '</div>';
                        html += '<div class="col-1 my-auto" style="padding: 0px 0px 0px 0px;">';
                        html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
                        html += '</div>';
                        html += '</div>';
                        $(wrapper).append(html);
                    }
                }
            });
        });

        $(document).on('click', '#removeRow', function () {
            $(this).closest('#inputFormRow').remove(); x--;
        });
    });
</script>

---

我要感谢所有花时间帮助我解决这个问题的人，Serghei Leonanco和Scaramouche，这个社区真是太棒了。

问题中的代码实际上工作正常，问题不在于代码本身，而在于，正如我在随后的编辑中所悲伤地指出的那样，问题一开始就不是这样，在这里有多个使用相同id的用户，因此每次执行AJAX时，结果只附加到第一个用户，每次单击它时，结果都会一次又一次地附加到第一个用户上，我的解决方案是将填充的AJAX和创建所述动态的all-in-one脚本的jQuery统一起来，从而一次解决了我的所有问题

下面是我的jQuery/AJAX代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#producto").click(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
                $("#producto").append(data);
            }
        });
    });
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $(".add_field_button");
        var x = 0;
        $(add_button).click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/testground/php/fetch_lista_productos_compra.php',
                type: 'get',
                success: function(data) {
                    if(x < max_fields) {
                        x++;
                        var html = '';
                        html += '<div class="form-group row" id="inputFormRow" style="margin-bottom: 0px;">';
                        html += '<label class="col-3 col-form-label font-weight-bold">Producto</label>';
                        html += '<div class="col-7">';
                        html += '<select class="custom-select my-1 mr-sm-2" id="producto" name="producto[]" required>';
                        html += '<option disabled selected value>Elegir...</option>';
                        html += data;
                        html += '</select>';
                        html += '</div>';
                        html += '<div class="col-1 my-auto" style="padding: 0px 0px 0px 0px;">';
                        html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
                        html += '</div>';
                        html += '</div>';
                        $(wrapper).append(html);
                    }
                }
            });
        });

        $(document).on('click', '#removeRow', function () {
            $(this).closest('#inputFormRow').remove(); x--;
        });
    });
</script>

---

我要感谢每一位花时间帮助我完成这项工作的人，Serghei Leonanco和Scaramouche，这个社区真是太棒了。

你更改了$producto.click for$producto.change，不幸的是，它只能是。click，另外，我不是100%确定，但我认为不可能根据您的建议触发该功能，因为除了禁用的选项外，没有其他选项，在任何情况下，我都尝试了console.log，并且数据获取正确。您更改了$producto.click for$producto.change，不幸的是，它不能是其他任何东西。单击，另外，我不是100%确定，但我认为不可能根据您的建议触发函数，因为除了禁用的选项外，没有其他选项，在任何情况下，我都尝试了console.log，数据获取正确。可能使用类而不是id，并且当您需要通过ajax添加新选项时，使用$this添加到特定的select only？Great suggestions@Swati遗憾的是，它不起作用，也许我没有正确使用此选择器，为了保持此评论的可读性，我将脚本的更新版本粘贴到了pastebin上。请检查一下，.put var ele=$this；退出ajax调用并编写ele.appenddata；在你的成功功能下，它应该起作用。检查答案。您的控制台是否显示任何错误？正确的数据是否来自ajax调用？因为，我在ajax调用中没有发现任何错误

---

美国。可能正在使用类而不是id，当您需要通过ajax添加新选项时，请使用$this添加到特定的select only？Great suggestions@Swati遗憾的是，它不起作用，也许我没有正确使用此选择器，为了保持此注释的可读性，我将脚本的更新版本粘贴到了pastebin上。请检查一下，.put var ele=$this；退出ajax调用并编写ele.appenddata；在你的成功功能下，它应该起作用。检查答案。您的控制台是否显示任何错误？正确的数据是否来自ajax调用？因为，我在ajax调用中没有发现任何错误。