5

我对 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
4

3 回答 3

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);
                            });
                        }
                    }
                });
            });
于 2013-07-12T08:11:20.713 回答
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);
                        });
                    }
                }
            });
        });
于 2013-07-12T08:11:20.813 回答
1

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

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

接下来
，您确实需要关注preventDefault该事件，以防止其默认行为被执行。虽然这并不能阻止事件通过 dom 传播/冒泡。如果单击的元素是提交按钮，则表单可能仍会被提交（并且页面将被刷新）。
要阻止这种情况发生，要么调用preventDefault()and stopPropagation()，或者（因为你使用的是 jQuery），你可以简单地 return 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
    });
});

当客户端使用击键（如回车）提交表单时，这也应该禁用正在提交的表单。

脚注：language脚本标签的属性自 1999 年以来已被弃用，只是type会做

于 2013-07-12T08:52:18.737 回答