Question

我是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);

Answer 1

变量名称？

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

您定义了$item参数，但从不在函数中使用它。相反，这是神秘的/未定义的value。

Answer 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);
    });
}

Answer 3

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

您错过了返回的值。

基于JSON添加表行

3 个答案: