Как отображать динамические данные на веб-странице с помощью AJAX

Question

Это мой первый вопрос по этому сообществу.

Итак, я создал две страницы jsp, которые выполняют следующие функции с помощью Spring MVC: 1.) Показывает данные, которые выбираются из MVC-Controller, и данные поступают из таблицы в базе данных SQL. 2.) Вставляет строки в таблицу в базе данных.

Обе функции работают нормально.

Теперь я хочу показать обе функции на одной веб-странице, и когда я вставляю строку в базу данных, она должна отображать обновленную таблицу одновременно.

Скажите, пожалуйста, как я могу динамически вставлять и отображать данные на одной и той же веб-странице без обновления с помощью AJAX.

(PS: я пытался использовать AngularJS, но не смог найти выход.)

Благодарю вас

Answer 1

Вы можете использовать следующий пример кода для демонстрации.

$(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);
        }
    });
}