Question

我正在尝试以Json格式调用实时Web服务 -

{"GetAllBookingsResult":[{"BookingID":47,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okokokoko","inspectionTime":"06: 00 PM - 07: 30 PM","selectedDate":null,"value":null},{"BookingID":48,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okijijoubibiuyv8","inspectionTime":"04: 30 PM - 05: 30 PM","selectedDate":null,"value":null},{"BookingID":50,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"joy2","inspectionTime":"04: 30 PM - 05: 30 PM","selectedDate":null,"value":null},{"BookingID":51,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"update","inspectionRemarks":"update","inspectionTime":"update","selectedDate":null,"value":null},{"BookingID":53,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"kjbkhbj","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null},{"BookingID":54,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okokmokm","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":55,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"JESUS MAN ","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":58,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"new update","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null},{"BookingID":59,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Thursday, December 24, 2015","inspectionRemarks":"heheheh","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":60,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Tuesday, December 29, 2015","inspectionRemarks":"tESTINGLDFNGLSDNGFLJKDFNG","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null}]}

这是我在Javascript中的AJAX调用

<script type="text/javascript">
    $(document).on(function () {
        var GetAllBookings = function () {
            $.ajax({
                type: "GET",
                url: 'http://localhost:41014/WsRepCatalog.svc',
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    $('#tbBookings').show();
                    var response = data.GetAllBookingsResult;
                    $.each(reponse, function (key, value) {
                        //stringify
                        var jsonData = JSON.stringify(value);
                        //Parse JSON
                        var objData = $.parseJSON(jsonData);
                        var BookingID = objData.BookingID;
                        var inspectionDate = objData.inspectionDate;
                        var inspectionTime = objData.inspectionTime;
                        var inspectionRemarks = objData.inspectionRemarks;
                        $('<tr><td>' + BookingID + '</td><td>' + inspectionDate + '</td><td>'
                         + inspectionTime + '</td><td>' + inspectionRemarks +
                         '</td></tr>').appendTo('#tbBookings');
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }
    });
</script>

这是我想以表格格式显示数据的地方。

<form onload="GetAllBookings()">
    <p>List of Bookings</p>
    <table border="1" id="tbBookings">
    </table>
</form>

但我似乎无法得到它，因为没有数据出现。需要很多帮助，谢谢！

Answer 1

<form onload="GetAllBookings()">

当您在表单上触发GetAllBookings事件时，您正试图致电load。

您的第一个问题是表单不会从网址加载内容，因此上没有加载事件。

你的第二个问题是当你定义GetAllBookings时，你在这里这样做了：

$(document).on(function () {
    var GetAllBookings = function () {

...在另一个函数中，所以它不是全局函数。

您还将一个函数作为第一个参数传递给on，但这没有任何意义。

摆脱内在事件属性
将您要调用的函数传递给ready事件处理程序

这样：

$(function () {
    $.ajax({
        type: "GET",
        url: 'http://localhost:41014/

等等。

请注意，您使用的是绝对网址，因此您可能会遇到跨域问题。查看开发人员工具中的控制台。阅读错误消息（如果有）。搜索Google以了解其含义。

Answer 2

给定的函数将以json格式从服务获取数据，在datatable_creationCallBack函数中，您可以迭代响应并获取到HTML表

     function initial_table_creation(){
            var objectForPost = null;
            var contentType = 'application/json; charset=utf-8';
            var servletPath = 'http://localhost:41014/WsRepCatalog.svc';
            var method = "GET";

                jQAjaxCallForAccountJSON(servletPath, method, contentType,
                        objectForPost, 'datatable_creationCallBack');
        }
        function datatable_creationCallBack(resultobject){
            var table_head=null,table_body=null;    
            var jndx=1;
            for(var i=0;i<resultobject.appstatus.length;i++){
                table_head="<thead><tr><th>S.No</th><th>Title</th><th>Message</th><th>BranchName</th><th>Exported Datetime</th></tr></thead>";
                table_body=table_body+"<tr><td>"+jndx+"</td><td>"+resultobject.appstatus[i].type+"</td><td>"+resultobject.appstatus[i].message+"</td>" +
                        "<td>"+resultobject.appstatus[i].branchName+"</td><td>"+resultobject.appstatus[i].exportedTime+"</td></tr>";
                jndx++;
                }
            $("#appdatas").html(table_head+"<tbody>"+table_body+"</tbody>");
        }

function jQAjaxCallForJSON(servletPath, method, contentType, objectForPost,
            callBack) {
        var dataInJSON = '';
        if (objectForPost == null) {
            objectForPost = {};
        }

        if ('DELETE' != method) {
            dataInJSON = JSON.stringify(objectForPost);
            $.ajax({
                async : true,
                url : servletPath,
                type : method,
                crossDomain : true,
                beforeSend : function(jqXHR) {
                    jqXHR.setRequestHeader("Content-type", contentType);

                },
                data : dataInJSON,
                dataType : 'json',
                processData : false,
                statusCode : {
                    401 : function() {

                        window.location = path + '/index.jsp';
                    }
                },
                success : function(resultObject) {
                    var callBackfunction = window[callBack];
                    callBackfunction(resultObject);
                },
                error : function(xhr, ajaxOptions, thrownError) {
                    /*console.info('server error');*/
                }
            });
        }
    }

使用AJAX使用Web服务

2 个答案: