添加基于JSON的表行

Adding table rows based on JSON

本文关键字：JSON 添加      更新时间：2023-09-26

我是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);
变量名称？ 
function orderAddRow($item) {
                     ^^^^^^----
    var row = '<tr><td>'+value.id+'</td>'
                         ^^^^^----

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

好的，主要问题是我的代码中没有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);
    });
}

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

您错过了返回的值。

相关文章：