无法解析 Html 表中的 json 数据答案

【问题标题】：Can't parse json data in Html table无法解析 Html 表中的 json 数据
【发布时间】：2025-12-17 09:55:02
【问题描述】：

能够调用 Eclipse 控制台输出证明的我的 Web 服务的 url。但无法将其解析为 HTML 表格。出于测试目的，我在 get.JSON 函数中编写了一个 windows.alert。但它不起作用，但是调用服务如下图所示： - 任何人都可以帮助我。谢谢。

after clicking on clickme button on webpage the console get printed: proof of webservice call:

HTML 页面代码：-

<!DOCTYPE html>
<html>`enter code here`
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>item svc demo</title>
<p id="demo"></p>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>

    function myFunction(jQuery)
    {
        window.alert(5 + 6);

    $.getJSON("http://localhost:8080/OnlineStore/kmsg/grocery/item",
                   function (data) {
                                window.alert(9 + 6);

                           }
                 );
    };
$(document).ready(myFunction); 

</script>

</head>

<body>
<table id="itemTable" border="2"> 

<tr> 
<th>itemno</th>
<th>offerPercent</th>
<th>regQtyBuyLimit</th>  
<th>offerQtyBuyLimit</th>  
<th>minReOrderLevel</th>
<th>pkg</th>
<th>addedOn</th>
<th>updatedOn</th> 
<th>mrp</th>
<td>regPrice</th>
<th>minBulkQty</th>
<th>bulkDiscount</th>
</tr> 

</table><br /><br /> 
<button onclick="myFunction()">Click me</button>

</body>
</html>

【问题讨论】：

我想用javascript来做...请帮助别人
请注意，这类“帮我调试”问题对社区不是很有用。请尝试隔离错误并将其作为更通用的问题。
也改进了格式。
@devpro 对不起，我没听懂你……什么格式？

标签： html json spring web-services parsing

【解决方案1】：

朋友们，我已经在几周前解决了这个问题。我将回答我自己的问题，希望这可以帮助某人：

下面给出的功能代码：

function setSales(SalesRecord,type,xml)
{
    var SalesRecordTable = document.getElementById("custorder2");
    var SalesRecordTableHead = document.getElementById("head2");
    var SalesRecordTableBody = document.createElement("tbody");

    SalesRecordTableBody.appendChild(SalesRecordTableHead);

    for(var i=0; i< SalesRecord.length; i++)
    {
        var row = document.createElement("tr");
        SalesRecordTable.insertRow(-1);

            var obj             = SalesRecord[i];
            var vSalesOrderNo       = obj["salesOrderNo"];
            var vMobileNo           = obj["mobileNo"];
            var vitemno         = obj["itemNo"];
            var vpkg        = obj["pkg"];
            var vitemQty    = obj["itemQty"];
            var vitemRate   = obj["itemRate"];
            var vaddedOn        = obj["addedOn"];
            var vupdatedOn      = obj["updatedOn"];

            var cell       = document.createElement("td");
            var cellText   = document.createTextNode(vSalesOrderNo);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vMobileNo);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vitemno);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vpkg);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vitemQty);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vitemRate);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vaddedOn);
            cell.appendChild(cellText);
            row.appendChild(cell);

            cell       = document.createElement("td");              
            cellText   = document.createTextNode(vupdatedOn);
            cell.appendChild(cellText);
            row.appendChild(cell);

            SalesRecordTableBody.appendChild(row);
}
SalesRecordTable.appendChild(SalesRecordTableBody);
SalesRecordTable.setAttribute("border", "2");       
}

// “SalesRecord”参数中传入 JSON 数据，customer2 为表 id，head2 为行 id，tbody 为表体。

谢谢。

【讨论】：

【解决方案2】：

这个函数在控制器中是这样的

    public JsonResult LoadIndex()
    {
        var x = (from a in db.DLVTFaulties
                 select new DLVTFaultyInfo
                 {
                     Id = a.Id,
                     Explain = a.Explain
                 });
        return new JsonResult { Data = x, JsonRequestBehavior =        JsonRequestBehavior.AllowGet };
    }

要显示表格的视图中的程序是

<script>
    function LoadDLVTFaulty() {
        $('#update_panel').html('Loading Data...'); 
        var id = 0;
        debugger;
        $.ajax({
            type: 'GET',
            url: '/DLVTFaultyInfo/LoadIndex',
            datatype: 'json',
            success: function (d) {
                if (d.length > 0) {
                    var $data = $('<table id = "Table"></table>').addClass('table table-responsive table-striped');
                    var header = "<thead><tr><th>Fault </th><th>Code </th><th></th></tr></thead>";
                    $data.append(header);
                    $.each(d, function (i, row) {
                        var $row = $('<tr/>');
                        $row.append($('<td/>').html(row.Explain));
                        $row.append($('<td/>').html(row.Id));
                        $row.append($('<td/>').html("<img id = \"edit\" src='/images/edit.png' title='Edit' onclick=\"EditFault(" + row.Id + ")\"/>"));
                        $row.append($('<td/>').html("<img  id = \"delete\" src='/images/delete.png' title='Edit' onclick=DeleteFault(" + row.Id + ") />"));
                        $data.append($row);
                    });

                    $('#update_panel').html($data);
                }
                else {
                    var $noData = $('<div/>').html('no fault');
                    $('#update_panel').html($noData);

                }
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

    }
</script>
<div id='update_panel'></div>

我对其进行了测试并在 mvc 中表现出色

【讨论】：