Question

我试图通过jQuery访问基于Java的REST服务，服务中的JSON如下所示。

{
    "data": [
        {
            "bookAuthor": "Bhaveh Thaker",
            "bookISBN": "ISBN 10: 0-596-52926-0",
            "bookName": "Introduction to RESTful Web Services",
            "id": "0"
        },
        {
            "bookAuthor": "Bhaveh Thaker",
            "bookISBN": "ISBN 10: 0-596-52926-0",
            "bookName": "Introduction to RESTful Web Services",
            "id": "1"
        }
    ]
}

我必须在jQuery数据表中显示这些数据。下面是我尝试使用jQuery Ajax的代码。

$(document).on('pageinit', '#order-status-report', function () {
    var table = '';
    $.ajax({
        url: "http://localhost:9090/SAPRestService/services/bookresource/getbooks",
        type: "GET",
        dataType: "json",
        success: function (response, textStatus, xhr) {
            alert(response.data);
            table = $('#example').DataTable({
                dom: "Tfrtip",
                data: response,
                columns: [
                    {data: "bookAuthor"},
                    {data: "bookISBN"},
                    {data: "bookName"},
                    {data: "id"}
                ]
            });
        }
    });

    $('#example tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            //alert(table.cell('.selected', 0).data()+table.cell('.selected', 1).data()+table.cell('.selected', 2).data()+table.cell('.selected', 3).data());

            hello(table.cell('.selected', 0).data(), table.cell('.selected', 1).data(), table.cell('.selected', 2).data(), table.cell('.selected', 3).data());
        }
    });
});

我也没有收到任何错误，但结果没有显示出来。我在上面的代码中缺少什么。

Answer 1

Fist off，无需等待pageinit事件，您可以在此之前执行Ajax请求：

var getbooks = $.getJSON("http://localhost:9090/SAPRestService/services/bookresource/getbooks");

现在，您可以使用挂起请求的.done()回调来在响应到达后执行事件绑定。

$(document).on('pageinit', '#order-status-report', function () {
    getbooks.done(function(response, textStatus, xhr) {
        $('#example').DataTable({
            dom: "Tfrtip",
            data: response,
            columns: [
                {data: "bookAuthor"},
                {data: "bookISBN"},
                {data: "bookName"},
                {data: "id"}
            ]
        });

        $('#example tbody').on('click', 'tr', function () {
            var $this = $(this);

            if ( $this.hasClass('selected') ) {
                $this.removeClass('selected');
            } else {
                $this.closest("tbody").find('tr.selected').removeClass('selected');
                $this.addClass('selected');
            }
        });
    });
});

当然这假设Ajax请求实际上成功了。使用浏览器的开发人员工具进行仔细检查。

Answer 2

最后，我使用下面提到的代码解决了这个问题。

<script>
$(document).ready(function () {
  var artistURL = "http://localhost:9090/SAPRestService/services/bookresource/getbooks";
            var returnData;
             var arrayReturn = [];
            $.ajax({
                type: "GET",
                url: artistURL,
                async: false,
                dataType: 'json',
                success: function (data) {          
                    for (prop in data) {
                    if (!data.hasOwnProperty(prop)) { continue; }
                    if (data[prop] != null) {
                        for (var i = 0; i < data[prop].length; i++) {           
                arrayReturn.push([data[prop][i]["bookAuthor"], data[prop][i]["bookISBN"],data[prop][i]["bookName"],data[prop][i]["id"]]);
                                        }
                    }
                }

                }

            });
            $('#example').dataTable({
                "bDestroy": true,
                "bScrollCollapse": true,
                "bJQueryUI": true,
                "bPaginate": false,
                "sScrollY": "310px",
                "bInfo": true,
                "bFilter": true,
                "bSort": true,
                "aaData": arrayReturn,
                "aoColumns": [
                { "sTitle": "bookAuthor" },
                { "sTitle": "bookISBN" },
                { "sTitle": "bookName" },
                { "sTitle": "id" }
                ]

            });

        });

</script>

以下是相应的html。

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>bookAuthor</th>
                <th>bookISBN</th>
                <th>bookName</th>
                <th>id</th>

            </tr>
        </thead>

        <tfoot>
            <tr>
              <th>bookAuthor</th>
                <th>bookISBN</th>
                <th>bookName</th>
                <th>id</th>
            </tr>
        </tfoot>
    </table>

根据我的观察，jquery datatable期望以下面提到的格式提供数据。

aaData: [
                ["A", 100],
                ["B", 25],
                ["C", 24],
                ["D", 82]
        ]

通过jquery ajax调用Rest服务

2 个答案: