javascript - 显示 Ajax 成功的消息

Question

我有以下 JavaScript 代码，它将数据传递到我的数据库，然后返回成功消息。

成功时，按钮会淡出并完美隐藏，但不会显示成功消息。

$(document).ready(function () {
    $('form.user_status').submit(function () {
        var userna = $(this).find("[name='userna']").val();
        var joborder_id = $(this).find("[name='joborder_id']").val();
        var user_email = $(this).find("[name='user_email']").val();
        var app_status = $(this).find("[name='app_status']").val();
        // ...
        $.ajax({
            type: "POST",
            url: "user_status.php",
            data: {
                userna: userna,
                joborder_id: joborder_id,
                user_email: user_email,
                app_status: app_status
            },
            success: function () {
                $('form.user_status').hide(function () {
                    $('div.success').fadeOut();
                });
                success = 'Status changed';
            }
        });
        return false;
    });
});

应该显示成功消息的 html

<div class="success" style="display: none;"></div>

Answer 1

您实际上并未对成功字符串执行任何操作。

为什么不去:

success: function(data){
    $('form.user_status').hide();
    $('div.success').html('Status changed').delay(1000).fadeOut();
}

除非你的成功 div 就在你的表单中。如果是这样，那么您的 div 将立即随表单一起消失。这有点傻。注意我已经添加了数据 - 您需要传递您返回的内容(或者如果您愿意，您将如何使用这些数据？)

默认情况下不显示意味着您的 div 显然是不可见的。淡出肯定会让它不可见吗？

编辑:所以我删除了一堆东西。如果您只是想更改 div 中写入的内容，请使其消失。你插入 html 然后淡出，它会为你处理好。

JSFiddle

延迟是为了给用户一秒钟的时间来阅读它。