尝试动态填充选择列表时 Json 结果“未定义”答案

【问题标题】：Json result "undefined" when attempting to dynamically populate select list尝试动态填充选择列表时 Json 结果“未定义”
【发布时间】：2014-09-11 13:27:58
【问题描述】：

我正在尝试使用 Jquery 将带有产品和价格的动态行添加到订单表单中。问题是我需要从 mysql 动态填充产品下拉列表。行添加正确。我遇到的唯一问题是下拉菜单只有一个选项，并且该选项显示“未定义”。

编辑 1： 我更改了 PHP 代码。我认为它现在格式正确，但我的选择列表中仍然出现“未定义”。

编辑 2： 我测试了 php，但出现了一些错误。现在 php 可以自行完美运行并返回以下 json 编码数组，但是当我尝试将其拉入我的 jquery 脚本时，它仍然返回“未定义”结果。：

[{"product":"wedding 4","price":"400.00","id":"9"},
 {"product":"wedding 2 ","price":"400.00","id":"8"},
 {"product":"Wedding 1","price":"4000.00","id":"1"},
 {"product":"potato","price":"50.00","id":"6"},
 {"product":"Event","price":"3000.00","id":"5"},
 {"product":"alligator","price":"800.00","id":"7"}]

jQuery:

var count = 0;
$(document).ready(function(){
$('p#add_field').click(function(){
    count += 1;
    $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" >');

$.get('includes/productrow.php', function(data){
$('#product_' + count + '').append('<option value=' + data.product_id + ' data-price=' + data.price + '>' + data.product +'</option>');
});

$('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
});

productrow.php

<?php  
    $productSql = "SELECT product_id, product, price FROM products WHERE compid = '$compid' ORDER BY product desc";
    $productResult = mysql_query($productSql, $link);

    while($productRow = mysql_fetch_array($productResult)){
    $final_array[] = array("product" => $productRow['product'], "price" =>   $productRow['price'], "id" => $productRow['id']);
    };

    echo json_encode($final_array);


?>

** 免责声明，我知道我应该使用 PDO，一旦这个项目完成，我将开始使用它。

【问题讨论】：

您既不应该使用 PHP-MySQL 也不应该使用 PHP-MySQLi，它们都不好，现在它已被弃用，将在下一个版本中删除
@Developer106 是什么让您认为 mysqli 扩展已被弃用？
我不完全了解您的用例。如果您希望在页面加载时动态填充下拉列表，则不需要 javascript/jQuery 来执行此操作。您是否尝试在页面加载后向下拉列表中添加其他选项？
@MikeBrant 页面加载时不会有任何内容。用户单击“添加”链接将产品行添加到页面，此时需要动态填充下拉列表。
不，我的意思是带有已弃用的 MySQLi 的 MySQL 不太好，您最好使用 PDO，为数据库层提供更多抽象。

标签： php jquery mysql json

【解决方案1】：

我总是使用 jquerys $.get:

$.get('includes/productrow.php', function(resp){
   $('#yourid').append(resp);
});

试试你能不能实现这个。

像这样使用它：

$.get('includes/productrow.php', function(resp){
   $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" /><option value=""></option>' + resp + '</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
});

希望这行得通！

我制作了以下文件来测试它：

<html>
    <head>
    <script type="text/javascript" src="../server/public/js/jquery.js"></script>
    <script type="text/javascript">
        $.get('productrow.php', function(resp){
               $('body').append('<strong>Link #</strong><br />' + '<label>Product or Service</label><select id="product_" name="products[]'+ '" /><option value=""></option>' + resp + '</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_" name="prices[]' + '" class="price" >');
        });
    </script>
    </head>
    <body>

    </body>
</html>

productrow.php：

<?php
echo "test";

结果：

Link #
Product or Servicetest  Price

测试按预期进行。你能把你的整个代码发给我还是创建一个 jsfiddle

【讨论】：

我会在哪里添加它以填充选择的选项？
@PaigeRoseFigueira 更新答案。
这行得通，因为它使 jquery 功能再次工作，行被正确添加，但它仍然显示一个空选择。甚至空白的<option value=""></option> 也没有出现。
@PaigeRoseFigueira 检查元素是否有任何错误？你如何调用 $.get 函数？如果你想在页面加载时使用它，你应该使用$(document).ready(function(){});
这就是令人沮丧的地方！完全没有错误！我用$(document).ready(function(){}); 调用它

【解决方案2】：

问题出在 JSON 请求中。更正后的代码如下。此代码还允许使用 data-price 属性自动填充带有产品价格的文本字段：

jquery：

var count = 0;

$(document).ready(function(){

$('p#add_field').click(function(){

    count += 1;

    $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
    });

productrow.php

$productSql = "SELECT product_id, product, price, compid FROM products WHERE compid = '$compid' ORDER BY product desc";
$productResult = mysql_query($productSql, $link);

while($productRow = mysql_fetch_array($productResult)){
$final_array[] = array("product" => $productRow['product'], "price" =>     $productRow['price'], "id" => $productRow['product_id']);
};

echo json_encode($final_array);

【讨论】：