ajax提交表单

1.添加数据

ajax调用用$("#reviewform").serialize()获取表单数据后提交给后台并根据后台传回的结果判断添加成功与否。(当然可以用原来的data:{key1:value1,key2:value2})

 

提交表单:没有submit按钮，有保存的button(点击事件是ajax异步提交表单)。

 

                        <form id="addhdform">
                            <div class="modal-body">

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">发现日期：</span> <input
                                        class="datainp  form-control el_modelinput span4" id="date01"
                                        type="text" placeholder="请选择日期" name="danger.findtime"
                                        readonly style="background-color: white">
                                </div>
                                <style>
.bodys {
    padding: 50px 0 0 50px;
}

.datainp {
    width: 200px;
    height: 30px;
    border: 1px #A5D2EC solid;
}

.datep {
    margin-bottom: 40px;
    line-height: 24px;
    margin-right: 15px;
}
</style>
                                <script type="text/javascript">
                                    var cancel = {
                                        minDate : '2015-06-16',
                                        maxDate : '2017-12-16'
                                    }
                                    var opts = $.extend({
                                        type : "je",
                                        minDate : undefined,
                                        maxDate : undefined
                                    }, cancel);
                                    if (opts.type == "je") {
                                        $("#optsdate").jeDate({
                                            isinitVal : true,
                                            festival : true,
                                            trigger : "click mouseenter focus",
                                            isTime : false,
                                            ishmsVal : false,
                                            minDate : opts.minDate,
                                            maxDate : opts.maxDate,
                                            format : "YYYY-MM-DD hh:mm",
                                            zIndex : 3000,
                                            okfun : function(elem, val) {
                                                alert(elem)
                                            }
                                        })
                                    }

                                    //实现日期选择联动
                                    var start = {
                                        format : 'YYYY-MM-DD',
                                        minDate : '2014-06-16 23:59:59', //设定最小日期为当前日期
                                        //festival:true,
                                        maxDate : $.nowDate({
                                            DD : 0
                                        }), //最大日期
                                        choosefun : function(elem, datas) {
                                            end.minDate = datas; //开始日选好后，重置结束日的最小日期
                                            endDates();
                                        },
                                        okfun : function(elem, datas) {
                                            alert(datas)
                                        }
                                    };
                                    var end = {
                                        format : 'YYYY年MM月DD日',
                                        minDate : $.nowDate({
                                            DD : 0
                                        }), //设定最小日期为当前日期
                                        //festival:true,
                                        maxDate : '2099-06-16 23:59:59', //最大日期
                                        choosefun : function(elem, datas) {
                                            start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
                                        }
                                    };

                                    $("#date01").jeDate({
                                        //festival:true,
                                        ishmsVal : false,
                                        minDate : '1800-07-12 00:00:00',
                                        maxDate : $.nowDate({
                                            YYYY : 100
                                        }),
                                        format : "YYYY-MM-DD hh:mm:ss",
                                        zIndex : 3000,
                                    })

                                    function testShow(elem) {
                                        $.jeDate(elem, {
                                            trigger : false,
                                            isinitVal : true,
                                            //festival:true,
                                            //ishmsVal:false,
                                            minDate : '2016-06-16 23:59:59',
                                            maxDate : $.nowDate({
                                                DD : 0
                                            }),
                                            format : "hh",
                                            zIndex : 3000,
                                        })
                                    }
                                </script>



                                <script type="text/javascript">
                                    $(document)
                                            .ready(
                                                    function() {
                                                        $('#reservationtime')
                                                                .daterangepicker(
                                                                        {
                                                                            singleDatePicker : true,//设置成单日历
                                                                            timePicker : true,
                                                                            timePickerIncrement : 1,
                                                                            format : 'YYYY-MM-DD h:mm A'
                                                                        },
                                                                        function(
                                                                                start,
                                                                                end,
                                                                                label) {
                                                                            console
                                                                                    .log(
                                                                                            start
                                                                                                    .toISOString(),
                                                                                            end
                                                                                                    .toISOString(),
                                                                                            label);
                                                                        });
                                                    });
                                </script>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次：</span>
                                    <select id="className" class="selectpicker form-control"
                                        name="danger.classtype" title="请选择">
                                        <option value="">--请选择--</option>
                                        <option value="甲班">甲班</option>
                                        <option value="乙班">乙班</option>
                                        <option value="丙班">丙班</option>
                                    </select>
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">发&nbsp;&nbsp;现&nbsp;&nbsp;人：</span> <input
                                        type="text" class="form-control el_modelinput" id="findPerson"
                                        name="danger.findperson" />
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">检查单位：</span> <select
                                        class="selectpicker form-control" name="danger.checkunit"
                                        id="fmchechunit" title="请选择">
                                        <option value="">--请选择--</option>
                                        <option value="安全小分组">安全小分组</option>
                                        <option value="矿领导">矿领导</option>
                                        <option value="科领导">科领导</option>
                                        <option value="屯兰安监处">屯兰安监处</option>
                                        <option value="五人小组">五人小组</option>
                                        <option value="省厅">省厅</option>
                                        <option value="山西焦煤">山西焦煤</option>
                                        <option value="西山煤电">西山煤电</option>
                                        <option value="西山煤电安监局">西山煤电安监局</option>
                                    </select>
                                </div>


                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：</span>
                                    <input id="didian" type="text"
                                        class="form-control el_modelinput" name="danger.address" />
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">隐患内容：</span>
                                    <textarea id="dangerneirong" class="form-control texta"
                                        rows="10" name="danger.content"></textarea>
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">隐患类型：</span> <select id="dangerType"
                                        class="selectpicker form-control" title="请选择"
                                        name="danger.type">
                                        <option value="">--请选择--</option>
                                        <option value="采煤">采煤</option>
                                        <option value="开掘">开掘</option>
                                        <option value="机电">机电</option>
                                        <option value="运输">运输</option>
                                        <option value="通风">通风</option>
                                        <option value="地测">地测</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans" id="unitSpan">责任单位：</span>
                                    <!-- 隐藏域 把ul的内容，提到name=unit 的 hidden input 中  -->
                                    <input id="unit" type="hidden" name="danger.unit" />
                                    <ul id="log"
                                        class="el_modelinput el_chooseInput log form-control">
                                        <img src="<%=path%>/controls/selectDropTree/smallTriangle.png"
                                            class="el_smallTriangle" width="7" />
                                    </ul>
                                    <span id="dutyUnit"></span>
                                    <ul id="treeDemo2" class="ztree"></ul>
                                </div>

                                <div class="input-group el_modellist" role="toolbar">
                                    <span class="el_spans">隐患级别：</span> <select
                                        class="selectpicker form-control" title="请选择" id="bankHigh"
                                        name="danger.dangergrade">
                                        <option value="" id="option0">--请选择--</option>
                                        <option value="无">无</option>
                                        <option value="C级">C级</option>
                                        <option value="B级">B级</option>
                                        <option value="A级">A级</option>
                                    </select>
                                </div>

                                <!-- 安全隐患上报报告内容 -->
                                <input id="reportCon" type="hidden" name="danger.dangerreport" />
                                <!-- 隐藏域 -->

                            </div>
                            <div class="modal-footer">
                                <!-- <button type="submit" class="btn btn-primary" id="submitButton">保存</button> -->
                                <button type="button" class="btn btn-primary" id="submitButton"
                                    onclick="saveButton()">保存</button>
                            </div>

                            <!--form原来在这里的  -->
                        </form>

 

 

 

提交表单的验证表单以及初始化表单进行提交(先验证(jQuery的validation插件进行验证)，验证通过进行ajax序列化表单以及提交数据)

 

<script type="text/javascript">
                        function saveButton() {
                            //alert($("#unit").val());
                            var isNotNull = $("#addhdform").validate({
                                ignore : [],
                                rules : {
                                    "danger.findtime" : "required",//发现日期
                                    "danger.classtype" : {
                                        required : true
                                    },
                                    "danger.findperson" : "required",//验证文本框的。前边是 name 属性
                                    "danger.checkunit" : {
                                        required : true
                                    },//验证下拉框的，下拉框中的option 独有一个value 从 0 ， 1 ，2 往下排
                                    "danger.address" : "required",
                                    "danger.content" : "required",
                                    "danger.dangergrade" : {
                                        required : true
                                    },
                                    "danger.type" : {
                                        required : true
                                    },
                                    "danger.unit" : "required"
                                },
                                messages : {
                                    "danger.findtime" : {
                                        required : "不能为空"
                                    },//下边与上边对应
                                    "danger.classtype" : {
                                        required : "必须选择"
                                    },
                                    "danger.findperson" : {
                                        required : "不能为空"
                                    },
                                    "danger.checkunit" : {
                                        required : "必须选择"
                                    },
                                    "danger.address" : {
                                        required : "不能为空"
                                    },
                                    "danger.content" : {
                                        required : "不能为空"
                                    },
                                    "danger.dangergrade" : {
                                        required : "必须选择"
                                    },
                                    "danger.type" : {
                                        required : "必须选择"
                                    },
                                    "danger.unit" : {
                                        required : "责任单位不能为空"
                                    }
                                }

                            });

                            if (isNotNull.form()) {
                                $
                                        .ajax({
                                            url : '${pageContext.request.contextPath}/danger_addDanger.action',
                                            data : $("#addhdform").serialize(),
                                            type : 'POST',
                                            dataType : 'json',
                                            async : true,
                                            success : function(data) {
                                                //弹出是否录入成功
                                                alert(data.result);
                                            }
                                        });
                          */
                                //发现时间
                                // $("#reservationtime").val(str);
                                //班次
                                $("#className").val(0);//
                                //发现人
                                $("#findPerson").val('');
                                //检查单位
                                $("#fmchechunit").val(0);//
                                //地点
                                $("#didian").val('');
                                //隐患内容
                                $("#dangerneirong").val('');
                                //隐患类型
                                $("#dangerType").val(0);//
                                //隐患级别
                                $("#bankHigh").val(0);//
                                $("#unit").val('');

                            }//if的括号

                        }
                    </script>

 

 

 

　　上面验证返回的isNotNull是一个JS对象，通过调用var myJSON = JSON.stringify(isNotNull);    console.log(myJSON);可以看到其转换为JSON的内容。( 验证通过才会执行ajax函数，如果不通过不会执行ajax函数)。

 

ajax请求携带的数据可以通过开发者工具查看

 

 

data : $("#reviewform").serialize()   表示序列化之后的数据，将表单的name与值取到（注意的是表单不能定义submit按钮）

(类似于与get提交方式的?后面的数据)