在不刷新的情况下在保存时更新表中的数据 (Ajax/JavaScript)

Question

I have the following function that is the event listener function to a button. When the button is clicked, this function is called and it should be updating an HTML table. It is doing so properly, but not until the user refreshes the page. What must I change on the front-end in order to make the table updates occur as soon as this button is clicked rather than forcing the user to refresh the page? Thank you!

function dialogWindowSaveAddressBookEditsButton_Click(addressBookObject) {
$.ajax({
    type: "POST",
    url: "/Services/AsyncServices.svc/DialogWindowSaveAddressBookEditsButton_Click",
    contentType: "application/json",
    data: JSON.stringify(addressBookObject),
    success: function (result) {
        if (result.d == false) {
            ...
        }
        else {
            ...
        }
    }
});
}

Answer 1

You have the result from your post request - you need to format it and then set the html table (or whatever component is it) to display that data.

You are not providing enough information (as of are you using any framework or just pure javascript), so I would suggest you to look into how data binding works for web development. https://www.wintellect.com/data-binding-pure-javascript/

If you are using a framework (AngularJs, React, Ember etc) look into how to bind data - it is usually very simple

Answer 2

When you call an ajax request then you must handle its response and update DOM accordingly. If the request is returning HTML then you can just render that under any element you want like this:

$('#element).html(response)

If it's returning JSON then you should set values accordingly to your DOM elements by using Jquery:

$(“.your-table or td”).text(resp.value)

Answer 3

我通过将以下内容添加到成功属性中解决了该问题：

location.reload(true);