Question

我需要在Ajax PUT请求后阻止我的页面重新加载。

基本上我有一个PUT请求更新我的数据库，这是从按钮点击触发，成功的这个我想调用另一个函数，这是一个ajax GET，重新加载我刚刚更新的数据，但是当这样做时，我点击控制器方法并获取新的数据列表，但页面重新加载到默认值，并且对我的新列表没有任何作用

Ajax PUT

function SendDeleteToController(checkid) {
    $.ajax({
        type: "PUT",
        url: '@Url.Action("PutCheck", "Admin")',
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        data: JSON.stringify({ methodParam: checkid }),
        success: function () {
            GetListofChecks();
        },
        error: function () {
            alert("error");
        }

AJAX GET

function GetListofChecks() {
    var department = $('#department').val();
    var process = $('#process').val();

    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetListofChecks", "Admin")',
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        data: { "Department": department, "Process": process },
        success: function (result) {
            $("#mainData").empty();

            $.each(JSON.parse(result),
                function (i, item) {
                    var row = i + 1;
                    $("#mainData").append()
        },
        error: function (result) {
            alert(result);
        }
    });
}

返回新数据列表的控制器

public JsonResult GetListofChecks(string department, string process)
{
    var listofChecks = new List<Check>();

    listofChecks = AdminModel.GetListofchecks(department, process);

    var json = new JavaScriptSerializer().Serialize(listofChecks);
    return Json(json, JsonRequestBehavior.AllowGet);
}

Answer 1

您不需要使用其他请求（GET）来检索数据，只需在删除项目后将其返回到控制器中，回调函数将获得一个响应对象，以便在{{1}中使用回调函数

试试这个（代码注释）：

success/error

Answer 2

这就是我试过的

 function SendDeleteToController(checkid) {


    var department = $('#department').val();
    var process = $('#process').val();

    $.ajax({
        type: "PUT",
        url: '@Url.Action("PutCheck", "Admin")',
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        data: JSON.stringify({ID: checkid, Department: department, Process: process}),
        success: function (result) {

            $("#mainData").empty();

            debugger;

            $.each(JSON.parse(result),
                function (i, item)
                {
                    var row = i + 1;

                    $("#mainData").append(
                        "<tr>" +
                        "<td id='application" + row + "'" + ">" + item.Application + "</td>" +

                        "<td id='department" + row + "'" + ">" + item.Department + "</td>" +

                        "<td id='process" + row + "'" + ">" + item.Process + "</td>" +

                        "<td id='checks" + row + "'" + ">" + item.Checks + "</td>" +

                        "<td id='Action" + row + "'" +">" +
                        "<button id='test' class='btn btn-xs btn-danger " +
                        "'" + "onclick='DeleteProcess(" + item.Id + ")" +
                        "'" + ">" + "<i class='glyphicon glyphicon-trash" +
                        "'" + "></i>" + "</button>" + "&nbsp" +

                        "<button class='btn btn-xs btn-primary " +"'" +
                        "onclick='EditProcess(" + item.Id + ")" +
                        "'" + ">" +
                        "<i class='glyphicon glyphicon-pencil" + "'" + "></i>" +
                        "</button>" +
                        "</td>" + "</tr>");
                });
        },
        error: function (result) {
            alert("error " + result);
        }
    });
}

更新了控制器

    [HttpPut]
    public JsonResult PutCheck(string ID, string department, string process)
    {
        var checkId = ID;
        var listofChecks = new List<Check>();

        if (checkId != null)
        {

            // delete data
            AdminModel.DeleteCheck(checkId);

            // get update list of data
            listofChecks = AdminModel.GetListofchecks(department, process);

        }

        return Json(listofChecks, JsonRequestBehavior.AllowGet);
    }

在AJAX PUT请求后阻止页面重新加载

2 个答案: