Question

我有以下AJAX调用，并且在AJAX调用成功后，我希望我的#success消息延迟和淡出。到目前为止它所做的一切都是显示为.2-.3秒，然后它比它进入的速度更快。

$(document).ready(function () {
    $('.approve').click(function () {
        $.ajax({
            url: 'userRequest_approve.php',
            data: {
                id: $(this).val(), //id
                status: 'Approved' //status
            },
            success: function (data) {
                //do something with the data that got returned
                $('#success').html('User Status Changed!');
                $('#success').delay(5000).fadeOut(400);
            },
            type: 'POST'
        });
    });
});

我的表格..

<form action="" method="POST" id="status">
    <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' />
    <?php if ($pending_firstname==t rue) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?>
</form>
<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button>

我为此做了一个小提琴... https://jsfiddle.net/jr7tuLep/

我收到错误，我不知道它意味着什么，但我粘贴了源代码而不是php。

有人看到我做错了吗？（我的文件中有Jquery库）

这有点超出了我的初步问题，但是通过我的AJAX调用，是否有办法检测某些内容无法正常执行并发布消息？

Answer 1

这对我有用：

HTML：

<form id="status">
    <input type='hidden' name='id' value='23' id='pending_id' />Name - john</br>Username - john</form>
<button class="approve" type="submit" form="status" name="approve" value="23">Approve</button>
<div id="success" style="color: red;"></div>
<br>

JS代码：

$('.approve').click(function () {
    $.ajax({
        url: '/echo/html',
         type: 'POST',
        data: {
            id: $(this).val(), //id
            status: 'Approved' //status
        },
        success: function (data) {
            //do something with the data that got returned
            $("#success").fadeIn();
            $("#success").show();
            $('#success').html('User Status Changed!');
            $('#success').delay(5000).fadeOut(400);
        },

    });
    return false;
});

您可以使用error属性管理AJAX中的错误，就像您成功一样。另一方面，如果你在服务器端的代码决定出错了，你可以返回一个布尔值和一条错误消息，指出出错了所以你可以将它显示给用户。

Answer 2

尝试替换

$('#success').delay(5000).fadeOut(400);

标准JavaScript超时

setTimeout(function() {
    $('#success').fadeOut(400);
}, 5000);

如果您没有在多个jQuery函数（$('#success').fadeIn(400).delay(500).fadeOut(600);）之间放置延迟，则可能更适合使用setTimeout()函数。

https://api.jquery.com/delay/

AJAX调用后延迟和淡出不能正常工作

2 个答案: