无法解析Html表中的json数据

时间:2015-11-25 04:38:41

标签: html json spring web-services parsing

能够调用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>

2 个答案:

答案 0 :(得分:0)

朋友我已经解决了几个星期的问题。我将回答我自己的问题希望这可以帮助某人:

下面给出的功能代码:

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

// JSON数据来自“SalesRecord”参数,customer2是表id,head2是行id,tbody是表的主体。

感谢。

答案 1 :(得分:-1)

这个函数在控制器

中是这样的
    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中工作得很好