spring mvc Controller与jquery Form表单提交代码demo

1.JSP表单

<%

String basePath = request.getScheme() + "://" + request.getServerName() +":"+ request.getServerPort() + request.getContextPath() + "/";

%>

<script language="javascript" type="text/javascript" src="<%=basePath %>js/datePicker/WdatePicker.js"></script>



<form id="insForm" action="car/updateInsuranceInfo" style="border:none;" method="post" > <!-- onsubmit="return checkIns();" -->

    <input name="carNo" type="hidden" value="${car.carNo}"/>

    <table>

        <tr>

            <td>交强险投保公司：<input id="insCorp" name="insCorp" type="text" value="${car.insCorp}"></td>

            <td>交强险保单号：<input id="insNo" name="insNo" type="text" value="${car.insNo}"></td>

            <td>交强险被保险人：<input id="insInsured" name="insInsured" type="text" value="${car.insInsured}"></td>

            <td>交强险到期日期：<input id="insExpire" name="insExpire" type="text" value="${car.insExpire}" class="Wdate" onClick="WdatePicker({skin:'whyGreen'})"></td>

            <td align="center"><input type="button" value="更新交强险信息" onclick="checkIns();"/></td>

        </tr>

    </table>

</form>

 

2.javascript代码(提交整个表单或单个参数值，如 data:"carNo=" + carNo +  "&insCorp=" + insCorp + "&insNo=" + insNo + "&insInsured=" + insInsured + "&insExpire=" + insExpire,,  或 var data = {"carNo":carNo,"insCorp":insCorp,"insNo":insNo,"insInsured":insInsured,"insExpire":insExpire};)

function checkIns(){

    //验证非空

        var flag = false;

    $("#insForm input[type='text']").each(function(){

        if($(this).val()=='') {

            //alert('第'+($(this).index()+1)+'个文本框为空');

            layer.alert("请完善交强险信息!",5);

            flag = true;

        }

    });

    if(flag){

        return;

    }else{

        //ajax提交

        $.ajax({

            url:"car/updateInsuranceInfo", 

            data:$('#insForm').serialize(), // 从表单中获取数据

            type:"POST", 

            error:function(xmlHttpRequest, error) { // 设置表单提交出错

                alert("操作失败，请联系系统管理员或稍后再试！"+error);

            },

            success:function(resData) {

                if(resData != 0){

                    layer.alert("更新交强险成功！",1);

                }else{

                    layer.alert("更新交强险失败!",3);

                }

            }

        });

    }



}

data:$('#insForm').serialize(), // 从表单中获取数据

3.controller

@Controller

@RequestMapping("/car/")

public class CarController {

        @ResponseBody

    @RequestMapping(value="/updateInsuranceInfo",method=RequestMethod.POST)

    public Integer updateInsuranceInfo(@RequestParam Map<String,Object> data, HttpServletRequest request){

        if(carService.updateInsuranceInfo(data) != 0){

            return 1;

        }

        return 0;

    }

    

}    

@RequestParam Map<String,Object> data，也可以写成model对象方式(InsuranceInfoModel model,)，或需要获取的参数方式(@RequestParam String insCorp, @RequestParam String insNo, @RequestParam String insInsured, @RequestParam String insExpire)。

4.sqlmap

<update id="updateInsuranceInfo">

        UPDATE car SET insurance_corp=#{insCorp}, insurance_no=#{insNo},insurance_insured=#{insInsured},insurance_expire=#{insExpire} WHERE reg_no=#{carNo}

    </update>