代码之家 › 专栏 › 技术社区 › blue dream

Json响应数据获取到html表

ajax json jquery

blue dream · 技术社区 · 7 年前

因为我是新来的开发人员,我遇到了一个问题。我使用Ajax调用从数据库获取数据。我的回答如下

{
    "orderdetails":
    {
    "PROD_CODE":["017.601.104"],
    "PROD_NAME":["Super Cat Door With Chitkini (2.5 x 2.5)' - left"],
    "GROSS_RATE":["914"],
    "SALE_RATE":["800"],
    "PERSENT":["12.473"],
    "SALE_QNTY":["1"],
    "TOTAL_PRICE":["800"]
    }
}

<table class=" table table-hover table-condensed dtltable ">
    <tr>
    <th>Item code</th>
    <th>Item Name</th>
    <th>Gross Rate</th>
    <th>Sale Rate</th>
    <th>Percent</th>
    <th>Sasle qntity</th>
    <th>Total price</th>
    </tr>
    </table>

为此,我尝试以下代码

  $.ajax({
                type: 'GET',
                url: './getOrderdtl.php',
                 data: {ordid: $text},
                success: function(data) {

                    alert(data.length);
                    for (var i = 0; i < data.length; i++) {

                         var tr = $('<tr/>');
                    //   alert(data[PROD_CODE[i]]);

                        // Indexing into data.report for each td element
                        $(tr).append("<td>" + data[i].PROD_CODE+ "</td>");
                        $(tr).append("<td>" + data[i].PROD_NAME + "</td>");
                        $(tr).append("<td> " + data[i].GROSS_RATE + " </td>");
                        $(tr).append("<td> <input type='text' value=''>" + data[i].SALE_RATE + "</input> </td>");
                        $(tr).append("<td>" + data[i].PERSENT + "</td>");
                        $(tr).append("<td> <input type='text'>" + data[i].SALE_QNTY + "</input> </td>");
                        $(tr).append("<td>" + data[i].TOTAL_PRICE + "</td>");
                        $('.dtltable').append(tr);

                     }
                },


        error: function(xhr) {
        //Do Something to handle error
            alert(xhr);
        }

            });

但是返回值是未定义的,这意味着在目标表的每一行都填充了“未定义”文本。我的代码怎么了?你是怎么解决这个奇怪的问题的?

2 回复 | 直到 7 年前

M A 7 年前

您需要在jqueryajax请求中添加dataType:'JSON',并将data.length更改为data.orderdetails.length。

例子:

 $.ajax({
            type: 'GET',
            url: './getOrderdtl.php',
             data: {ordid: $text},
            dataType: 'JSON',
            success: function(data) {
                data = data.orderdetails;
                alert(data.length);
                for (var i = 0; i < data.length; i++) {

                     var tr = $('<tr/>');
                //   alert(data[PROD_CODE[i]]);

                    // Indexing into data.report for each td element
                    $(tr).append("<td>" + data[i].PROD_CODE+ "</td>");
                    $(tr).append("<td>" + data[i].PROD_NAME + "</td>");
                    $(tr).append("<td> " + data[i].GROSS_RATE + " </td>");
                    $(tr).append("<td> <input type='text' value=''>" + data[i].SALE_RATE + "</input> </td>");
                    $(tr).append("<td>" + data[i].PERSENT + "</td>");
                    $(tr).append("<td> <input type='text'>" + data[i].SALE_QNTY + "</input> </td>");
                    $(tr).append("<td>" + data[i].TOTAL_PRICE + "</td>");
                    $('.dtltable').append(tr);

                 }
            },


    error: function(xhr) {
    //Do Something to handle error
        alert(xhr);
    }

        });

Batu.Khan 7 年前

值在内部 orderdetails

    $(tr).append("<td>" + data[i].orderdetails.PROD_CODE+ "</td>");
    $(tr).append("<td>" + data[i].orderdetails.PROD_NAME + "</td>");
    $(tr).append("<td> " + data[i].orderdetails.GROSS_RATE + " </td>");
    $(tr).append("<td> <input type='text' value=''>" + data[i].orderdetails.SALE_RATE + "</input> </td>");
    $(tr).append("<td>" + data[i].orderdetails.PERSENT + "</td>");
    $(tr).append("<td> <input type='text'>" + data[i].orderdetails.SALE_QNTY + "</input> </td>");
    $(tr).append("<td>" + data[i].orderdetails.TOTAL_PRICE + "</td>");