php ajax表单提交不刷新父页面

i have some issues for ajax form submit

我对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);
                        });
                    }
                }
            });
        });

a page have list of data there is button for comment, when it click a popup window open. i write comment and submit but the problem is that a parent page is refresh i dont want refresh a parent page only i want submit the data, insert in database and popup window will be closed and data will be shown on parent page.

一个页面有一个数据列表，当它点击一个弹出窗口时，有一个按钮可供评论。我写注释并提交但是问题是父页面是refresh我不想刷新父页面我只想提交数据，插入数据库，弹出窗口将被关闭，数据将显示在父页面上。

can any body help me

有人能帮助我吗

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

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

Nothing Happen I Post my Complete Code::

我发布了完整的代码:

HTML FILE ::

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 File::

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

3 个解决方案

#1

Try this code

试试这个代码

$("#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);
                        });
                    }
                }
            });
        });

#2

By using prevent default you can stop the form refreshing the page like so: http://api.jquery.com/event.preventDefault/

通过使用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);
                            });
                        }
                    }
                });
            });

#3

First let me say this:
You're binding an event listener, but the DOM is probably not ready, yet: wrap your code in a $(document).ready(function(){}); callback
Then: setTimeout("$.ads.close()", 2000); is bad practice. setTimeout should be passed a reference to a function object, not a string, replace it with:

首先让我这么说:您正在绑定一个事件监听器，但是DOM可能还没有准备好:将代码封装在$(文档).ready(function(){})中;回调:setTimeout(" $ .ads.close()",2000);是不好的做法。应该将setTimeout传递给函数对象的引用，而不是字符串，将其替换为:

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

Next
You, indeed, neet to preventDefault the event, to prevent its default behaviour to get executed. Though this doesn't prevent the event from propagating/bubbling through the dom. If the clicked element is a submit button, the form might still get submitted (and the page will be refreshed).
To stop this from happening, either call both preventDefault() and stopPropagation(), or (since you're using jQuery), you can simply return false, which does the same thing as calling both methods.

接下来，实际上，neet要避免默认事件，以防止其默认行为被执行。虽然这并不能阻止事件在dom中传播/冒泡。如果单击的元素是一个submit按钮，表单仍然可能被提交(并且页面将被刷新)。要阻止这种情况发生，可以调用preventDefault()和stopPropagation()，或者(因为您使用的是jQuery)，只需返回false，这与调用这两个方法是一样的。

In your case, though, I'd attach the event handler to the form, and listen for the submit event:

不过，在您的案例中，我将把事件处理程序附加到表单，并侦听提交事件:

$(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
    });
});

That should disable the form being submitted when the client uses a keystroke (like enter) to submit the form, too.

当客户端使用击键(如enter)提交表单时，应该禁用提交的表单。

Foot-note: the language attribute of the script tag has been deprecated since 1999, just type will do

脚注:脚本标记的语言属性自1999年以来就被弃用了，只需键入即可

#1