弹出 div 中的成功消息而不刷新页面答案

【问题标题】：success message in popup div without refreshing page弹出 div 中的成功消息而不刷新页面
【发布时间】：2018-03-15 13:39:13
【问题描述】：

我想在弹出 div 中显示成功的文本消息而不刷新页面

我的弹出表单是这样的

<div class="modal-content"> 
    <div id="message">Your message has been sent.<br /><br /></div> 
    <form action="<?php echo $_SERVER['REQUEST_URI'];?>" id="CallBackForm"  name="CallBackForm" method="post">
        <div class="form-group">
            <input  id="custmobileNo" name="custmobileNo" type="text"  required="required">
            <input type="submit" value="call" id="callback" name="callback" class="btn btn-info">
        </div>  
    </form> 
</div>

当我点击这个链接弹出会调用

<a href="#"  data-toggle="modal" data-target="#call-back">
    <input type="submit" value="Call" class="btn-d btn-doctor" > 
</a>

CSS：

<style type="text/css"> 

    #message { 
        display:none; 
        font-size:15px; 
        font-weight:bold; 
        color:#333333; 
    } 
</style>

Ajax 调用：

<script>
    $("#callback").click(function () {
        var custmobileNo = $("#custmobileNo").val();
        $.ajax({
            url: "<?php echo base_url('Call'); ?>",
            type: 'post',
            data: {custmobileNo: custmobileNo},
            beforeSend: function () {
                if (custmobileNo != "") {
                    $("#message").fadeIn(); //show confirmation message

                    $("#CallBackForm")[0].reset(); //reset fields
                }
            }
        });
    });
</script>

我用一些数据写了beforeSend function()，它是标准代码还是不是我不知道。它调用消息很好，但它没有关闭我希望它会在几秒钟内关闭，然后再次单击按钮成功消息验证显示我也想清除该文本。

【问题讨论】：

消息不应该在你的ajax调用之后显示=在成功部分，而不是在发送之前？如果您想让它消失，请添加一些 complete: function() { //here you close your message after x second for example } 或在 success: ... 中添加相同的内容
你要成功后功能只有你能给出答案
您的代码正在显示消息，对吧？
是的，它正在显示，但我再次打开弹出消息显示直到刷新页面
我发布了一个 anwser，告诉我它是否有效，如果它是你要找的，请 :) @Nadh

标签： php jquery ajax

【解决方案1】：

试试这样吧：

$.ajax({
    url: "<?php echo base_url('Call'); ?>",
    type: 'post',
    data: {custmobileNo: custmobileNo},
    beforeSend: function () {
        if (custmobileNo != "") {
            $("#message").fadeIn(); //show confirmation message
            $("#CallBackForm")[0].reset(); //reset fields
        }
    },
    success: function() {
        setTimeout(function() {   //hide message after a certain time
            $("#message").fadeout();
        }, 5000); // choose after how many time message should hide, here 5s
    }
});

但是如果您的 Ajax 调用失败，您将不会进入成功部分，所以要小心！

你可以用complete : function() {...}而不是success : function() {...}做同样的事情，这里是关于Ajax事件的一些信息：https://api.jquery.com/Ajax_Events/

这是你要找的吗？

【讨论】：