javascript - 表单提交后阻止 JS 重新加载页面

Question

我使用 MVC 框架 CodeIgniter、FullCalendar、Bootstrap 和 Jquery 来创建网站。

日历具有可单击事件，可打开包含表单的模式对话框。
该表单似乎有效，因为正确调用了 Controller 方法并更新了数据库，但我想避免网站在提交表单后转到另一个页面或重新加载。
我尝试过几种方法:

e.preventDefault();
return false; 

还有更多...

这里是有关模式对话框和表单的 HTML:

            <div class="modal-body">
                <form id="myForm" action="<?=base_url()?>index.php/activite/planning_people" method="post">
                    <input type="hidden" id="date" name="date"/>
                    <input type="hidden" id="id" name="id"/>
                    <?php foreach ($people as $person) : ?>
                        <div class="checkbox">
                            <label><input type="checkbox" value="<?=$person['number']?>" name="people[]"><?= $person['firstname']." ".$person['lastname'] ?></label>
                        </div>
                    <?php endforeach; ?>
            </div>

            <div class="modal-footer">
                    <input class="btn btn-lg" type="submit" id="submitButton" value="Validate">
                </form>
            </div>

<div class="container">
    <div id="bootstrapModalFullCalendar"></div>
</div>

这里是 eventClick 事件的 javascritpt:

    eventClick:  function(event) {
        var inputs = document.getElementsByTagName('input');

        $('#modalTitle').html(event.title+" "+moment(event.start).format('LL'));
        $('#id').val(event.id.split(" ")[0]);
        $('#date').val(event.id.split(" ")[1]);
        $('#fullCalModal').modal();
    }
});

$('#submitButton').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: "<?=base_url("index.php/activity/planning_people")?>",
        type: "POST",
        data: $("myForm").serializeArray(),
        success: function(data){
            alert(data);
        },
    });
    return false;
});

此外，不会显示成功警报。

Controller 重定向到空白页面:

public function planning_people() {
    $people = $this->input->post("people[]");
    $id = $this->input->post("id");
    $date = $this->input->post("date");
    $this->EZ_query->delete_planning($id, $date);

    if ($people != null) {
        foreach ($encadrants as $key => $no) {
            $this->EZ_query->add_planning($id, $date, $no);
        }
    }
}

我的问题已经解决了很多次，并且我检查了很多同一问题的 stackoverflow 页面，但没有成功。请帮忙!
谢谢

Answer 1

第一:您需要使用提交表单而不是提交按钮

$('#myForm').submit(function(e) {

而不是

$('#submitButton').submit(function(e) {

第二:您忘记了 myForm id 之前的 # 符号

data: $(this).serializeArray(), // or data: $("#myForm").serializeArray(),

而不是

data: $("myForm").serializeArray(),