PHP Ajax表单提交而不刷新父页面

Question

我有一些关于Ajax表单提交的问题。

$("#send").on("click", function() {

$.ajax({
            type: "POST",
            url: "ads_process.php",
            data: $("#ads").serialize(),
            success: function(){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });

一张页面上有一份数据列表，列表中每一行有一个评论按钮，点击后会弹出一个窗口。我在窗口中填写评论内容并提交，但问题是提交后父页面会刷新，而我并不想要刷新父页面，我只想提交数据、将其插入数据库，并关闭弹出窗口，同时在父页面中显示数据。

请问是否有人可以帮助我？

=====================================================================================

以下是我的完整代码：

HTML文件：

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="javascript" type="text/javascript" src="../js/jQuery_1-9-0.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>

<a href="" class="topopup">popup</a>

<script language="javascript" type="text/javascript">
    $("#send").on("click", function() {

        events.preventDefault();
        $.ajax({
        type: "POST",
        url: "ads_process.php",
        data: $("#ads").serialize(),
        success: function(data){
            if(data == "true") {
                $("#ads").fadeOut("fast", function(){
                    //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                    setTimeout("$.ads.close()", 2000);
                    });
                }
            }
        });
    });
</script>

<div id="toPopup"> 

    <div class="close"></div>
    <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
    <div id="popup_content"> <!--your content start-->
    <form action="" method="post" id="ads">

    <div class="formMainDiv">

        <div class="formDiv">

            <div class="lableHeading">
                Agent Name:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAgentName" id="txtAgentName" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Ad ID:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAdsId" id="txtAdsId" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Comments:
            </div>
            <div class="inputDiv">
                <textarea name="txtComments" id="txtComments" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Reason:
            </div>
            <div class="inputDiv">
                <input type="radio" name="rdReason" id="rdReason" value="Not Responding at the moment" />
                <label class="lableText">
                    Not Responding at the moment&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Busy" />
                <label class="lableText">
                    Busy&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Call back" />
                <label class="lableText">
                    Call back&nbsp;&nbsp;
                </label>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Other Resaons:
            </div>
            <div class="inputDiv">
                <textarea name="txtOtherReason" id="txtOtherReason" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Status:
            </div>
            <div class="inputDiv">
                <img src="/images/icon/green.png" />
                    <input name="rdFoneStatus" type="radio" value="1">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/red.png" />
                    <input name="rdFoneStatus" type="radio" value="2">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/gray.png" />
                    <input name="rdFoneStatus" type="radio" value="3">
            </div>

        </div>

        <div style="float:right; margin:18px 0 0">
            <button id="send" class="button">Submit</button>
        </div>

    </div>

    </form>
    </div> <!--your content end-->

</div> <!--toPopup end-->

<div class="loader"></div>
<div id="backgroundPopup"></div>

JS文件：

/* 
    author: istockphp.com
*/
jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    /* event for close the popup */
    $("div.close").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                    }
                );

    $("div.close").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }   
    });

    $("div#backgroundPopup").click(function() {
        disablePopup();  // function close pop up
    });

    $('a.livebox').click(function() {
        alert('Hello World!');
    return false;
    });


     /************** start: functions. **************/
    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }
    /************** end: functions. **************/
}); // jQuery End

- deemi-D-nadeem

---

你需要澄清弹出窗口是一个独立的窗口还是类似于浮动div（即它实际上是“父级”的一部分）。由于提交表单会更改页面，因此preventdefault()将起作用。http://api.jquery.com/event.preventDefault/ - Waygood

当您的代码运行时，DOM尚未加载。请检查我的答案，有几个需要处理的问题。 - Elias Van Ootegem

如果您愿意接受并/或者点赞有用的回答，我们将不胜感激。如果您不知道如何操作，请查看此页面，了解为什么需要这样做以及如何进行。 - Elias Van Ootegem

Answer 1

通过使用prevent default，您可以停止表单刷新页面，如下所示： http://api.jquery.com/event.preventDefault/

$("#send").on("click", function(events) {
    events.preventDefault();
    $.ajax({
                type: "POST",
                url: "ads_process.php",
                data: $("#ads").serialize(),
                success: function(){
                    if(data == "true") {
                        $("#ads").fadeOut("fast", function(){
                            //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                            setTimeout("$.ads.close()", 2000);
                            });
                        }
                    }
                });
            });

- 1321941

Answer 2

尝试这段代码

$("#send").on("click", function(e) {
e.preventDefault();
$.ajax({
            type: "POST",
            url: "ads_process.php",
            //Specify the datatype of response if necessary
            data: $("#ads").serialize(),
            success: function(data){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });

- Deepu

Answer 3

首先，让我说一下：
你正在绑定一个事件监听器，但 DOM 可能还没有准备好：将你的代码包裹在 $(document).ready(function(){}); 回调函数中
然后：setTimeout("$.ads.close()", 2000); 是不好的实践。 setTimeout 应该传递一个函数对象的引用，而不是一个字符串，请用以下内容替换它：

setTimeout(function()
{
    $.ads.close();
}, 2000);

下一步
确实，你需要使用preventDefault来阻止事件执行默认行为。但这并不能防止事件在DOM中传播/冒泡。如果单击的元素是提交按钮，则表单仍可能被提交（并且页面将被刷新）。
要防止这种情况发生，可以同时调用preventDefault()和stopPropagation()，或者（因为你使用的是jQuery），可以直接返回false，这与调用两个方法的效果相同。

在你的情况下，我建议将事件处理程序附加到表单，并侦听submit事件：

$(document).ready(function()
{
    $('#form').on('submit', function(e)
    {
        $.ajax({
            type: 'post',
            url: 'your/url',
            data: $(this),
            success: function(data)
            {//do stuff
                console.log(data);
            }
        });
        return false;
        //or
        e.preventDefault();
        e.stopPropagation();//strictly speaking, not required here
    });
});

当客户端使用按键（比如回车键）提交表单时，这应该会禁用表单的提交。

注：自1999年以来，脚本标记的language属性已被弃用，只需使用type。

- Elias Van Ootegem