使用AJAX消费Web服务

Question

I am trying to invoke a live web service in Json Format -

{"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}]}

This is my AJAX call in my Javascript

<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>

This is where i want to display the data in a table format.

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

But I can't seem to get it as no data appear. Much help needed, thank you!

Answer 1

 <form onload="GetAllBookings()"> 

Here you are trying to call GetAllBookings when the load event fires on the form.

Your first problem is that forms do not load content from a URL so there is no load event on them.

Your second problem is that when you defined GetAllBookings you did so here:

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

… inside another function, so it is not a global.

You're also passing a function as the first argument to on but it makes no sense to so.

1. Get rid of the intrinsic event attribute
2. Pass the function you want to call to the ready event handler

Such:

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

And so on.

Note you are using an absolute URL so it is possible you are going to run cross origin issues. Look at the Console in your developer tools. Read the error messages (if there are any). Search Google to find out what they mean.

Answer 2

The given function will get the data from service in json format and in datatable_creationCallBack function you can iterate the response and fetch into HTML table

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