使用 AJAX 和 PHP 在点击时填充 <select>答案

【问题标题】：Populate <select> on click using AJAX and PHP使用 AJAX 和 PHP 在点击时填充 <select>
【发布时间】：2020-03-29 04:53:13
【问题描述】：

我有一个只有一个选项的<select>，我想使用 PHP 从数据库中获取其余选项，然后使用 AJAX 使用 PHP 结果填充所述<select>。

不幸的是，我的代码不起作用，我对 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>

在我的 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;
}
?>

一如既往地非常感谢您的任何帮助，并感谢您的宝贵时间。

重要编辑

<select> 有一个重复的 ID，也许我应该从一开始就说明这一点，因为我知道这是导致我的问题的原因。

事实上，在这个<form> 中，选择是根据用户请求动态创建的。他们点击 添加产品 并创建一个带有可用产品的新选择，我知道所述输入的 id/名称必须具有 [ ] (id="producto[]")要转换为数组，但我不知道如何让 AJAX 处理这个动态创建的重复选择问题。我为这个迟来的声明道歉，我现在意识到它是最重要的。

【问题讨论】：

可能使用 class 而不是 id 并且当您需要通过 ajax 添加新选项时，使用 $(this) 仅添加到特定选择？
很好的建议 @Swati 遗憾的是它没有用，也许我没有正确使用 this 选择器，我将脚本的更新版本粘贴到了 pastebin 上，以保持此评论的可读性。请检查一下，pastebin.com/raw/rtXz8BkZ。
把var ele=$(this);从你的ajax调用中写出来，在你的成功函数下写ele.append(data);它应该可以工作。检查this答案。
您的控制台是否显示任何错误？正确的数据是否来自 ajax 调用？因为，我在 ajax 调用中没有发现任何错误。
让我们continue this discussion in chat.

标签： php jquery ajax

【解决方案1】：

您必须从这里编辑您的回复：

<?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;
}
?>

至此：

    <?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'");

    $response = '';

    while ($row = mysqli_fetch_assoc($sql_query)) {
        $titulo = $row['titulo'];
        $response .= '<option value="' .$titulo . '">' . $titulo . '</option>'; //Concatenate your response
    }

    echo $response;

?>

但我建议使用JSON 来获得响应并在客户端解析它。您可以通过将所有值推入响应数组并使用json_encode() 来做到这一点。最后，您只需要一个值即可从服务器获得直接响应，并在客户端附加您需要的任何值。

更新您还可以将数据附加到现有的 select 选项中。您可以通过编辑添加 thous：

<script type="text/javascript">
$(document).ready(function() {
    $("select#producto").focus(function() { //Change to on Focus event
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            success: function(data) {
                $("select#producto").html(data); //Change all html inside the select tag 
            }
        });
    });
});
</script>

测试结果：

$('select#options').focus(function(){
    alert("Hello this is a select trigger");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="options">
    <option value="test">Test</option>
</select>

【讨论】：

【解决方案2】：

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

也就是说，而不是做：

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

只是做

$rows = [];
while ($row = mysqli_fetch_assoc($sql_query)) {
    $rows[] = $row;
}

//this is your best bet when sending data from PHP to JS,
//it sends the rows as JSON-like string,
//which you'll parse to an array in the client
echo json_encode($rows);

然后在客户端

$.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);
        });
    }
});

关于您对几个selects的编辑

我当然无权访问您的服务器，所以我使用的是返回 JSON 的模拟服务。 ID 是动态生成的，所有数据加载都是在您单击按钮后异步进行的。尝试使用您的 url 并根据您的 html 修改 success 函数。

$(document).ready(function() {
    $('#add').click(() => {
      //how many so far...?
      let selectCount = $('select.producto').length;
      
      const select = $('<select class="producto">');
      select.attr('id', `producto${selectCount + 1}`);
      
      //then we fetch from the server and populate select
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        type: 'get',
        success: function(data) {
          data.forEach((d) => {
            const option = $('<option>');
            option.val(d.id).text(d.title);
            select.append(option);
          });
        }
      });
      
      document.body.appendChild(select[0]);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id='add'>Add product</button><br>
<!--<select class="custom-select my-1 mr-sm-2" id="producto" name="producto" required>
    <option disabled selected value>Elegir...</option>
</select>-->

嗨

【讨论】：

【解决方案3】：

事实证明，问题中的代码实际上工作正常，问题不在于代码本身，而是正如我在问题中所说（遗憾的是在后来的编辑中，而不是从一开始），有其中不止一个 <select> 使用相同的 id，因此每次执行 AJAX 时，结果仅附加到第一个 <select>，并且每次单击它时都会一遍又一遍地附加，我的解决方案是统一的填充 <select> 的 AJAX 和创建上述动态 <select> 的 jQuery 都在一个脚本中，从而一次性解决了我的所有问题。

在我的 jQuery/AJAX 代码下面：

<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>

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

【讨论】：

【解决方案4】：

<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.

【讨论】：

您更改了 $("#producto").click 为 $("#producto").change 不幸的是它不能是任何.click 之外的其他东西，加上我不是 100% 确定，但我认为不可能根据您的建议触发该功能，因为除了 disabled 没有其他选项b> 一，无论如何，我确实尝试过 console.log 并且数据正在正确获取。