首页 > 代码库 > spring mvc Controller与jquery Form表单提交代码demo

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 = http://www.mamicode.com/{"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>