基于 JSON 添加表行答案

【问题标题】：Adding table rows based on JSON基于 JSON 添加表行
【发布时间】：2015-08-11 21:49:02
【问题描述】：

我是 JSON 新手。我有一个选择框和 JavaScript change() 触发器。我根据选定的值使用 Ajax 执行 MySQL 查询。查询结果将打印为 HTML 表格中的新行。

但是新行没有追加。我做错了什么？

HTML

<select id="orderAddProduct">
    <option value=""></option>
    <option value="0001">Product 1</option>
    <option value="0002">Product 2</option>
</select>

<table id="orderTable">
    <tr><th>ID</th><th>Name</th></tr>
</table>

JavaScript

$("#orderAddProduct").change(function () {
    var element = $(this);
    var selectedValue = $(this).val();
    $.ajax({
        type: "POST",
        url: "orderAddProduct.php",
        data: {option: selectedValue},
        datatype: "json",
        success: function (data) {
            alert("OK");
            orderAddRow(data);
        },
        error: function () {
            alert("ERROR");
        }
    });
});

function orderAddRow($item) {
    $.each($item,function(index,value) {
        var row = '<tr><td>'+value.id+'</td>'
                 +'<td>'+value.name+'</td></tr>';
        $('#orderTable').append(row);
    )};
}

PHP

try {
    $pdo = new PDO(DB_TYPE . ':host=' . DB_HOST . '; dbname=' . DB_NAME, DB_USER, DB_PASS);
} catch (PDOException $e) {
    die("ERROR: " . $e->getMessage());
}

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec("SET NAMES utf8");

$productId = $_REQUEST['option'];

$sql = $pdo->prepare("SELECT * FROM products_view WHERE id = ?");
$sql->execute(array($productId));
$row = $sql->fetch(PDO::FETCH_ASSOC);

$json_array = array("ID" => $row['id'], "name" => $row['name']);
echo json_encode($json_array);

【问题讨论】：

alert("OK") 显示了吗？您是否检查过变量 data 包含您期望它包含的内容（例如使用 console.log(data)）？
控制台日志中有错误吗？ each 循环是否按照您认为的方式执行（通过将 console.log 放入其中进行检查）？
@Anders，是的，alert("OK") 显示正确。我刚刚编辑了代码并添加了console.log(data)，请查看我的问题中的错误消息。 selectedValue 是未定义的索引...我该怎么办？
标记第 21 行会有所帮助。
@Anders，我使用的是$_REQUEST['selectedValue'] 而不是$_REQUEST['option']，这是正确的。现在其他一切（json）都可以，但没有附加行。

标签： javascript php jquery mysql json

【解决方案1】：

变量名？

function orderAddRow($item) {
                     ^^^^^^----
    var row = '<tr><td>'+value.id+'</td>'
                         ^^^^^----

您定义了一个$item 参数，但从不在函数中使用它。取而代之的是这个神秘/未定义的value。

【讨论】：

我只是忘记了一段代码...抱歉 - 我会将这些行添加到我的问题中...

【解决方案2】：

好的，主要问题是我的代码中没有JSON.parse() 函数。下面是我最终工作的代码。

$("#orderAddProduct").change(function () {
    var element = $(this);
    var selectedValue = $(this).val();
    $.ajax({
        type: "GET",
        url: "orderAddProduct.php",
        data: {option : selectedValue},
        datatype: "json",
        success: function (response) {
            response = JSON.parse(response);
            if(response === undefined) {
                alert("undefined");
            } else {
                orderAddRow(response);
            }
        },
        error: function () {
            alert("ERROR");
        }
    });
    return false;
});

function orderAddRow($data) {
    $.each($data,function(index,value) {
        var row = '<tr><td>' + value.ID + '</td>'
            + '<td>' + value.name + '</td></tr>';
        $('#orderTable').append(row);
    });
}

【讨论】：

【解决方案3】：

success: function (data) {
    alert("OK");
    orderAddRow(data);
},

你错过了返回的值。

【讨论】：

我认为问题出在orderAddRow()函数