如何在jQuery UI Dialog中捕获并显示请求错误？

我来帮你搞定这个问题！你遇到的核心问题是load()方法的错误处理能力有限，没法灵活捕获HTTP状态码并直接更新对话框内容。咱们换个思路，用$.ajax()手动控制整个请求流程，就能完美处理401、500这类错误，还能把错误信息展示在对话框里。

问题根源分析 #

你之前尝试的.error()写法有两个问题：

1. .error(alert("error"))会立即执行alert，而不是在错误发生时触发；
2. load()的错误处理逻辑被链式调用的顺序覆盖了，而且它本身没法直接拿到完整的HTTP状态信息。

优化后的完整代码 #

替换你原来的点击事件处理代码，用$.ajax()实现更可控的请求和错误处理：

$(function () {
    // 初始化对话框的逻辑保持不变，记得调用初始化函数
    function fSetupDialogs() {
        $("#dialog-popup").dialog({
            autoOpen: false,
            resizable: true,
            modal: true,
            width: 'auto', // 可选：让对话框宽度自适应内容
            height: 'auto'
        });
    }
    fSetupDialogs();
});

$('body').on('click', '.popup-Edit', function (e) {
    e.preventDefault(); // 阻止默认点击行为，避免页面跳转
    const url = $(this).data("url");
    const $dialog = $("#dialog-popup");

    // 先打开对话框并显示加载动画，提升用户体验
    $dialog.html("<img src='/content/images/Spinner.gif'>")
           .dialog("option", "title", "Edit " + url.split("/").pop())
           .dialog('open');

    // 用$.ajax发起请求，替代load()实现精细控制
    $.ajax({
        url: url,
        type: 'GET',
        success: function(response) {
            // 请求成功：把局部视图内容插入对话框
            $dialog.html(response);
        },
        error: function(xhr, status, error) {
            // 请求失败：根据HTTP状态码定制错误内容
            let errorContent = '';
            switch(xhr.status) {
                case 401:
                    errorContent = '<div class="alert alert-danger">未授权访问，请先登录！</div>';
                    break;
                case 500:
                    // 可以显示服务器返回的错误详情，方便调试
                    errorContent = `<div class="alert alert-danger">服务器错误：<br>${xhr.responseText}</div>`;
                    break;
                case 404:
                    errorContent = '<div class="alert alert-danger">请求的页面不存在！</div>';
                    break;
                default:
                    errorContent = `<div class="alert alert-danger">请求出错：${status}<br>${error}</div>`;
            }
            // 更新对话框内容为错误信息，同时修改标题提示错误
            $dialog.html(errorContent);
            $dialog.dialog("option", "title", "错误 - Edit " + url.split("/").pop());
        }
    });
});

关键功能说明 #

1. HTTP状态码识别：通过xhr.status直接获取请求的HTTP状态码，轻松区分401、500、404等不同错误类型；
2. 错误内容展示：根据状态码生成友好的错误提示，甚至可以把服务器返回的错误页面内容（xhr.responseText）展示出来，方便开发调试；
3. 用户体验优化：请求发起前先显示加载动画，避免用户误以为点击无效；
4. 可控性更强：$.ajax()支持更多配置（比如请求超时、自定义请求头），后续扩展功能更方便。

备选方案：用load()的回调处理错误 #

如果你坚持想用load()，也可以通过它的回调函数实现错误处理，只是灵活性稍弱：

$('body').on('click', '.popup-Edit', function (e) {
    e.preventDefault();
    const url = $(this).data("url");
    const $dialog = $("#dialog-popup");

    $dialog.html("<img src='/content/images/Spinner.gif'>")
           .dialog("option", "title", "Edit " + url.split("/").pop())
           .dialog('open');

    $dialog.load(url, function(response, status, xhr) {
        if (status === "error") {
            let errorContent = '';
            switch(xhr.status) {
                case 401:
                    errorContent = '<div class="alert alert-danger">未授权访问，请先登录！</div>';
                    break;
                case 500:
                    errorContent = `<div class="alert alert-danger">服务器错误：<br>${xhr.responseText}</div>`;
                    break;
            }
            $dialog.html(errorContent);
            $dialog.dialog("option", "title", "错误 - Edit " + url.split("/").pop());
        }
    });
});

内容的提问来源于stack exchange，提问作者Nick.Mc