Javascript 使用AJAX使用Web服务

我正在尝试调用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>

$（文档）.on（函数（）{
var GetAllBookings=函数（）{
$.ajax({
键入：“获取”，
网址：'http://localhost:41014/WsRepCatalog.svc',
contentType:“json”，
数据类型：“json”，
成功：功能（数据）{
$（'tbBookings'）.show（）；
var response=data.GetAllBookingsResult；
$.each（响应、函数（键、值）{
//严格化
var jsonData=JSON.stringify（值）；
//解析JSON
var objData=$.parseJSON（jsonData）；
var BookingID=objData.BookingID；
var-inspectionDate=objData.inspectionDate；
var-inspectionTime=objData.inspectionTime；
var检查备注=objData.inspection备注；
$（“”+BookingID+“”+inspectionDate+“”
+检查时间+“”+检查备注+
''）。附于（'#tbBookings'）；
});
},
错误：函数（xhr）{
警报（xhr.responseText）；
}
});
}
});

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

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

预订单

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

…在另一个函数中，因此它不是全局函数

您还将函数作为第一个参数传递给上的

，但这样做毫无意义

去掉内在的事件属性
将要调用的函数传递给
ready
事件处理程序
例如：

等等

请注意，您使用的是绝对URL，因此可能会出现跨源问题。查看开发人员工具中的控制台。阅读错误消息（如果有）。搜索Google以了解它们的含义。
给定函数将以json格式从服务中获取数据，在datatable\u 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');*/
                }
            });
        }
    }

函数初始\u表\u创建（）{
var objectForPost=null；
var contentType='application/json；charset=utf-8'；
var servletPath=http://localhost:41014/WsRepCatalog.svc';
var method=“GET”；
jQAjaxCallForAccountJSON（servletPath、方法、contentType、，
objectForPost，“datatable_creationCallBack”）；
}
函数datatable_creationCallBack（resultobject）{
var table_head=null，table_body=null；
var jndx=1；
对于（var i=0；i您的响应是什么样子的？请尝试使用console.log（data）。我还想说，$.parseJSON（）应该在each之前而不是在each中使用。并且根本不应该使用JSON.stringify。当您发送请求时，它是否会响应所需的消息？您可以打印响应吗？
$(document).on(function () {
    var GetAllBookings = function () {

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

     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');*/
                }
            });
        }
    }