How to display dynamic data on a web page using AJAX

Question

This is my first question on this community.

So, I've created two jsp pages which do the following functionalities using Spring MVC: 1.) Shows the data which is fetched from MVC-Controller and the data is coming from table in SQL database. 2.) Inserts rows into the table in the database.

Both functionalities are working fine.

Now I want to show both functionalities on the same web page and when I insert the row in the database, it should display the updated table at the same time.

Please tell me how can I insert and display data on the same web page dynamically without refreshing using AJAX.

(PS: I tried using AngularJS but couldn't find a way out.)

Thank You

score 0 · Answer 1 · answered Feb 24 '17 at 05:45

Your can refer the following sample code for your demo.

$(document).ready(function () {
    commonGateWay(/Get,"load URL","",loadTableDataSuccess);

    $(document).on("click","#update",function(event){
        //insertTable request
        commonGateWay(/Post,"insert URL","",insertTableDataSuccess);
    });
});


function loadTableDataSuccess(data){
    //construct your table rows here
}

function insertTableDataSuccess(data){
    //again call load table req from here
    commonGateWay(/Get,"test URL","",loadTableDataSuccess);
}

//Method to initiate AJAX request
function commonGateWay(type, url, data, callback) {
    $.ajax({
        type: type,
        url: url,
        data: data,
        success: function (data) {
            callback(data);
        }
    });
}

How to display dynamic data on a web page using AJAX

1 Answers1