javascript - Ajax:多次提交后防止刷新页面

Question

我已经使用 jQuery 函数来刷新 div，但是当我多次提交表单时，页面将被刷新。我想停止刷新并显示新内容，例如 Facebook 评论更新。请帮我解决这个问题。

这是我的代码:

<div class="row">
   <div id="right-side" class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
        <div id="profile_container">
            <div class="profile_items">
                <ul class="profile_ul">
                    <li id="personal-info">
                        <div class="profile_content">
                            <form action="" method="POST" id="personal-info-form" class="form-group">
                                <table>
                                <?php   foreach ($personal as $pdata) { ?>
                                <tr id="new_personal" class="pro-info-set">
                                    <td class="info-group-left">
                                        <p class="pro-info-left"><?php echo $pdata['js_personal_title']; ?></p>
                                    </td>
                                    <td class="info-group">
                                        <p class="pro-info-right"><?php echo $pdata['js_personal_desc']; ?></p>
                                    </td>
                                </tr>
                                <?php   } ?>
                                <tr class="pro-info-set">
                                    <td class="info-group-left">
                                        <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
                                    </td>
                                    <td class="info-group form-inline">
                                        <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
                                        <input id="submit_person" class="form-control" type="submit" value="Add">
                                        <label id="submit_person_msg" value="Add"></label>
                                    </td>                                       
                                </tr>
                                </table>
                            </form>
                            <script>
                                $(document).ready(function(){
                                    $("#submit_person").click(function(e){
                                        e.preventDefault();
                                        js_personal_title = $("#js_personal_title").val();
                                        js_personal_desc= $("#js_personal_desc").val();
                                        var datastr = 'js_personal_title='+js_personal_title + '&js_personal_desc='+js_personal_desc; 
                                        $.ajax({
                                            type: "POST",
                                            url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
                                            data: datastr,
                                            success:function() {
                                                $("#personal-info-form")[0].reset();
                                                $(".row").load(location.href  + "#new_personal");
                                                $( "#submit_person_msg" ).append( "<p> Loading... </p>" );
                                            }
                                        });
                                    return false;
                                    });
                                });
                            </script> 
                        </div>                            
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

试试这个:

$("#submit_person").click(function(e){
    e.preventDefault();
    $(this).prop('disabled', true); //<---disabled it here
    var data = { // instead you can send an object too
        js_personal_title : $("#js_personal_title").val(),
        js_personal_desc  : $("#js_personal_desc").val()
    }
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
        data: data,
        success:function() {
            $("#personal-info-form")[0].reset();
            $(".row").load(location.href  + " #new_personal", function(){
                $("#submit_person").prop('disabled', false); // now enable it here.
            });
            $( "#submit_person_msg" ).append( "<p> Loading... </p>" );
        },
        error: function(){ 
            $("#submit_person").prop('disabled', false); // now enable it here. 
        }
    });
});

<小时/>

在我看来，问题是用户能够发送多个请求，因此您可以在单击时禁用按钮，并在将数据附加到 DOM 中时启用它。

<小时/>

更新:

您可以使用.load(url, cb)函数的回调函数来启用禁用的按钮，这确保内容已加载并且您可以再次单击提交按钮。

$(".row").load(location.href  + " #new_personal", function(){
     $("#submit_person").prop('disabled', false); // now enable it here.
});

<小时/>

另一个建议是为每个元素添加唯一的 id 或将其更改为类名。我可以看到你在 php 循环中复制了 ids:

   <?php   foreach ($personal as $pdata) { ?>
    <!-- <tr id="new_personal" class="pro-info-set"> -->
    <tr class="pro-info-set new_personal">
        <td class="info-group-left">
            <p class="pro-info-left"><?php echo $pdata['js_personal_title']; ?></p>
        </td>
        <td class="info-group">
            <p class="pro-info-right"><?php echo $pdata['js_personal_desc']; ?></p>
        </td>
    </tr>
    <?php   } ?>