在同一个页面进行增删改查小结

以前学的时候是增、改操作都跳到不同的页面进行处理，现在感觉这样文件过多，所以想放在同一个页面处理，一开始的想法很简单，用模态框+js控制显示隐藏，然后提交数据就行，代码如下

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="addUserModalLabel">添加用户</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="addForm">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">名字</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" placeholder="请输入名字">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" id="test">
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="1"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender"  value="2"> 女
                                    </label>
                                </div>
                            </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

js控制模态框的出现与隐藏

$("#addBtn").click(function(){
    $("#addModal").modal();
        $("#submitAddBtn").click(function(){
            var name = $("#name").val();
            console.log(name);
        });
});

点击提交时只是打印操作，但是这种方法第二次点击的时候会出现多次提交的现象，并且以后每次弹出后都还保留了前面输入的数据，所以这种方法并不好，


第一次的时候没问题，第二次的时候打印了两次，这时候就会有比较严重的问题，尤其是修改的时候，会一次修改多条记录。
然后采用了artTemplate.js，把模态框添加