javascript - 关于bootstrap模态框重复打开后提交如何避免重复提交？

问题描述

问 题

bootstrap模态框我点击打开后不提交，这样重复2遍，然后填入数据提交的时候就会一下子重复提交3次！怎么避免呢？或者换种说法，怎么设置在模态框退出的时候就直接销毁，不论什么形式退出（出BUG的是在不点击下方的取消按钮的时候）。下面是代码——

html

<div class="modal fade" id="addModal" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addModalLabel">添加信息</h4>
            </div>
            <div class="modal-body">
                <form class="form" id="addForm">
                    <div class="form-group">
                        <input type="text" class="form-control" name="student_id" id="add_studentId" placeholder="学号">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="student_name" id="add_studentName"
                               placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="student_sex" id="add_studentSex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="department_name" id="add_departmentName"></select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="major_name" id="add_majorName"></select>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="class_id" id="add_classId" placeholder="班级">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitAdd">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

主要关注这里的取消按钮，上面有属性data-dismiss，请问怎么用JS实现？

js

$add.click(function () {
            getDepartmentName('#add_departmentName');
            getMajorName('#add_majorName');
            $add_modal.modal('show');
            $('#submitAdd').click(function () {
                var json = {
                    student_id: $('#add_studentId').val(),
                    student_name: $('#add_studentName').val(),
                    student_sex: $('#add_studentSex').find('option:selected').val(),
                    department_id: $('#add_departmentName').find('option:selected').val(),
                    major_id: $('#add_majorName').find('option:selected').val(),
                    class_id: $('#add_classId').val()
                };
                $.ajax({
                    url: 'addStudent',
                    method: 'post',
                    data: json,
                    success: function (response) {
                        if (response == '109') {
                            $add_modal.modal('hide');
                            $('#addForm')[0].reset();
                            toastr.success('添加数据成功');
                            $table.bootstrapTable('refresh');
                        } else if (response == '101') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：学号');
                        } else if (response == '102') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：姓名');
                        } else if (response == '103') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：性别');
                        } else if (response == '104') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：所属学院');
                        } else if (response == '105') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：所属专业');
                        } else if (response == '106') {
                            $add_modal.modal('hide');
                            toastr.warning('添加失败：班级号');
                        } else if (response == '107') {
                            toastr.error('添加失败：数据表中已有相同数据');
                            bootbox.confirm({
                                title: '操作提示',
                                message: '想要替换数据库中已有的信息吗？',
                                buttons: {
                                    confirm: {
                                        label: '是',
                                        className: 'btn-success'
                                    },
                                    cancel: {
                                        label: '否',
                                        className: 'btn-default'
                                    }
                                },
                                callback: function (result) {
                                    if (result) {
                                        $.ajax({
                                            url: 'updateStudent',
                                            method: 'post',
                                            data: json,
                                            success: function (response) {
                                                console.log(response);
                                                if (response == '122') {
                                                    $add_modal.modal('hide');
                                                    $('#addForm')[0].reset();
                                                    toastr.success('更新数据成功');
                                                    $table.bootstrapTable('refresh');
                                                } else {
                                                    $add_modal('hide');
                                                    toastr.error('更新数据失败');
                                                    $table.bootstrapTable('refresh');
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    }
                });
                return false;
            });
            return false;
        });

问题截图

这里可以看到右侧提示了4次（我退出了3次，最后一次一起提交）

控制台请求了4次ajax……

解决方案

观察你的代码发现一个问题。在$add.click()事件里面，点击一次就会添加一次 $('#submitAdd').click()，最后导致执行多个回调也就是发送多个请求。所以把$('#submitAdd').click()移到外面去。
另：如果希望一定要点击取消关闭模态框，可设置

$('#myModal').modal({
  backdrop:'static',
  keyboard: false
})

这篇关于javascript - 关于bootstrap模态框重复打开后提交如何避免重复提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！