如何通过jQuery Ajax实现每次点击都显示成功/错误提示消息

先帮你梳理下现有代码里的核心问题，再给出针对性的修改方案：

问题1：错误提示的样式混淆 #

你的PHP控制器里，失败分支居然用了alert-success（成功样式），这会让用户完全分不清成功和错误状态，先把这个基础问题修正：

function SednMsg() {
    $wallet=$_POST['wallet'];
    $msg=$_POST['msg'];
    $senderwallet=$_POST['senderwallet'];
    $result['data'] = $this->M_main->SaveMsgs($wallet,$msg,$senderwallet);
    if($result['data']=="1") {
        echo '<div class="alert alert-success">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Success!</strong> Your message has been sent successfully.
              </div>';
    } else {
        // 把错误提示的样式改成alert-danger，和成功提示区分开
        echo '<div class="alert alert-danger">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Error!</strong> Failed to send your message. Please try again.
              </div>';
    }
}

问题2：提示容器被隐藏后无法再次显示 #

当前前端代码中，#result容器在显示提示后会延迟5秒淡出隐藏，但下次提交时，你没有先把这个容器重新显示出来——新的提示内容虽然已经插入，但元素处于隐藏状态，所以用户看不到。修改Ajax的成功回调逻辑：

$(function(){
    $('#submit').click(function(e){
        e.preventDefault();
        var wallet = $('#wallet').val().trim();
        var msg = $('#msg').val().trim();
        var senderwallet = $('#senderwallet').val();
        
        // 先清空并强制显示#result容器，避免之前的隐藏状态影响新提示
        $('#result').empty().show();

        // 可选：添加表单空值验证，避免无效提交
        if(!wallet || !msg){
            $('#result').html('<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Warning!</strong> Please fill in all required fields.</div>');
            $('#result').delay(3000).fadeOut('slow');
            return;
        }
        
        $.ajax({
            type: "POST",
            url: "<?php echo base_url('main/SednMsg'); ?>",
            data: {wallet:wallet,msg:msg,senderwallet:senderwallet},
            success: function(data){
                $('#result').html(data);
                // 延迟5秒自动隐藏提示
                $('#result').delay(5000).fadeOut('slow');
                // 可选：提交成功后清空表单输入，提升用户体验
                $('#wallet').val('');
                $('#msg').val('');
            },
            // 新增：处理网络错误等Ajax请求失败的情况
            error: function(){
                $('#result').html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>Error!</strong> Network error, please check your connection and try again.</div>');
                $('#result').delay(5000).fadeOut('slow');
            }
        });
    });
});

额外优化建议 #

• 给提交按钮添加加载状态：点击后禁用按钮并显示"提交中..."，请求完成后恢复，防止用户重复点击提交。
• 可以给输入框添加实时验证提示，比如用户输入为空时，在输入框下方显示红色提示文字。

这样修改后，每次点击提交按钮，都会先重置#result容器的状态，确保新的成功/错误提示能正常显示，同时也修复了样式混淆的问题，提升了整体交互体验。

内容的提问来源于stack exchange，提问作者amit