jquery - 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

Answer 1

试试这个代码

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