zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Vsphere日记01.ESXi5.5.install
    Linux快速计算MD5和Sha1命令
    在linux虚机中装vmtools
    BT下载原理分析
    虚拟防火墙实验
    简单介绍一下vue2.0
    小白编程系列(一):编程语言选择
    html几种美丽的分割线
    利用:header匹配所有标题做目录
    markdown编辑器的小建议
  • 原文地址:https://www.cnblogs.com/simpledev/p/3845076.html
Copyright © 2011-2022 走看看