JQuQuery UI 对话框取消 AJAX 请求

jquery ui dialog cancel for ajax request

本文关键字：AJAX 请求 取消 对话框 UI JQuQuery      更新时间：2023-09-26

我试图通过表单提交发送多条信息。在此提交中，我想返回 false（取消页面请求，因为它是 ajax）并关闭表单。不幸的是，关闭似乎也确实回来了，我假设是真的。这样 post 请求就不会失败。这将使对话框仍保留在屏幕上。如果我调用 $（"#dialog-form"）.dialog（"close"）;然后返回 false 不运行，页面更改。

如果有人知道如何解决这个问题，或者如果我做错了什么，那将非常有帮助：

JavaScript：

$('#modifyConsoleForm').submit(function(evt) {
    $.ajax({
        type : 'POST',
        url : jQuery("#modifyConsoleForm").attr("action"),
        data : jQuery(this).serialize(),
        dataType : "json",
        success : function(data) {
            hideError();
        },
        error : function(data) {
            setError('modify of console failed');
        }
    });
    $("#dialog-form").dialog("close");
    return false;
});

和我的对话框初始化：

$("#dialog-form").dialog({
    autoOpen : false,
    height : 300,
    width : 350,
    modal : true,
    close : function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

我也尝试在对话框关闭时总是返回 false，但它似乎不起作用。我错过了什么吗？

尝试使用 event.preventDefault（） 停止页面更改

例如：

$('#modifyConsoleForm').submit(function(evt) {
    evt.preventDefault();
    $.ajax({
        type : 'POST',
        url : jQuery("#modifyConsoleForm").attr("action"),
        data : jQuery(this).serialize(),
        dataType : "json",
        success : function(data) {
            hideError();
        },
        error : function(data) {
            setError('modify of console failed');
        }
    });
    $("#dialog-form").dialog("close");
    return false;
});

关闭对话框并返回 true/false 应在 ajax 请求完成后，在成功和错误函数中完成。

同样明智的做法是在运行 ajax 请求时放置一个活动指示器，并在收到服务器的响应后隐藏/删除它，这样用户就会知道有一个进程正在进行。

相关文章：