更新列表，然后使用 JQuery 显示更新的列表

Question

我对 JQuery 不是很有经验，我开始使用 WebAPI，在我的 .js 文件中，我有一些函数可以从 StudentAPIController（我的 WebApi 控制器）调用方法：

$(document).ready(function () { GetAll(); GetStudent(); AddStudent(); UpdateStudent()})

function ShowList() {
    $.ajax({
        type: "get",
        url:"/api/StudentsAPI"
    }).success(function (result) {
        var Output = "";
        for (var i = 0; i < result.length; i++) {
            Output += "<hr>";
            Output += "<b> Name: </b>" + result[i].Name + "<br/>";
            Output +="<b> LastName: </b>" + result[i].LastName + "<br/>"
        }
        $("#lblMessage").html(Output);
    })
    .error(function () {
        $("#lblMessage").html("An error occurred")
    })
}

和

  function UpdateStudent () {
$("#btnUpdateStudent").click(function () {
    var student = { StudentID:2, Name: "Prika", LastName: "Prika" }
    $.ajax({
        type:"put",
        url: "/api/StudentsAPI/2",
        data: student
    }).success($("#lblMessage").html(ShowList()))
    .error(function (xhr, ajaxOptions, thrownError) {
        $("#lblMessage").html("Error: An error occurred")
    })
    return false;
})
        }

UpdateStudent() 函数运行良好（正在表中更新）但是一旦成功，我想显示表中所有学生的更新列表，包括刚刚更新的，我现在得到的是一个列表表的所​​有学生，但该列表不包括最后更新的学生（该列表未更新）。我知道我为此拥有的函数： ShowList() 在页面加载时获取列表，但在调用 UpdateStudent() 函数之后获取列表。 如果我刷新页面它显示最后一个列表而不是更新的列表，我该怎么做才能修复它？？？

Answer 1

您应该像这样在您的 ajax 调用的 success 事件上调用 ShowList() 方法。

function ShowList() {
     // Add here your existing code(ajax call code) to get data from api endpoint
}

function UpdateStudent () {

    var student = { StudentID:2, Name: "Prika", LastName: "Prika" }
    $.ajax({
        type:"put",
        url: "/api/StudentsAPI/2",
        data: student
    }).success(function(){
        ShowList();
    });
    .error(function (xhr, ajaxOptions, thrownError) {
        $("#lblMessage").html("Error: An error occurred")
    })
    return false;
}


$(function(){
    //Call other methods also here as needed.
    UpdateStudent();

    // bind the click event to UpdateStudent method
    $("#btnUpdateStudent").click(function () {
           UpdateStudent();
    });
});