Javascript Ajax：防止在多次提交后刷新页面

我已经使用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>

$（文档）.ready（函数（）{
$（“#提交人”）。单击（功能（e）{
e、 预防默认值（）；
js#u personal_title=$（“#js#u personal_title”）.val（）；
js#u personal_desc=$（“#js#u personal_desc”）.val（）；
var datastr='js_personal_title='+js_personal_title+'&js_personal_desc='+js_personal_desc；
$.ajax({
类型：“POST”，
url:“”，
数据：datastr，
成功：函数（）{
$（“#个人信息表单”）[0]。重置（）；
$（“.row”）.load（location.href+“#new#u personal”）；
$（“#提交_person_msg”）。追加（“加载…”
”；
}
});
返回false；
});
});

试试这个：

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

---

另一个建议是为每个元素放置唯一的ID，或者将其更改为类名。我可以看到您正在复制php循环中的ID：

   <?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   } ?>

您应该收听

点击
收听的形式为istead的
提交
事件

$("#personal-info-form").on('submit', 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;
})

$（“#个人信息表”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
js#u personal_title=$（“#js#u personal_title”）.val（）；
js#u personal_desc=$（“#js#u personal_desc”）.val（）；
var datastr='js_personal_title='+js_personal_title+'&js_personal_desc='+js_personal_desc；
$.ajax({
类型：“POST”，
url:“”，
数据：datastr，
成功：函数（）{
$（“#个人信息表单”）[0]。重置（）；
$（“.row”）.load（location.href+“#new#u personal”）；
$（“#提交_person_msg”）。追加（“加载…”
”；
}
});
返回false；
})
我在这里找到了答案

为什么不在用户单击按钮后禁用该按钮，并在第三次尝试时完全执行
ajax
后重新启用它呢reloaded@SahanPerera到那时你的请求可能已经完成了。那我能做什么呢？你的意思是我必须在功能成功后隐藏按钮？@SahanPerera好的，我想我得到了你的建议相反，您可以在加载发生后启用它。您可以在那里传递回调函数。在第三次尝试时，页面将被重新加载
$("#personal-info-form").on('submit', 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;
})

$(document).on('click', '.choimg', function(e) {

});