Question

我对JQuery没有太多经验，而且我开始使用WebAPI，在我的.js文件中我有一些函数可以调用来自StudentsAPIController（我的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调用的ShowList()事件上调用success方法。

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

更新列表，然后使用JQuery

1 个答案: