mvc表单提交总结

  submit 按钮提交

01<div style="margin-top: 20px;">

02    <form id="bindForm"action="http://www.glorze.com"method="post" onsubmit="return validForm();">

03        二维码编号：<input id="codeNum"name="codeNum" value="" style="height: 30px;"size="20" maxlength="16" />

04        <input type="submit"class="a_btn" value="高老四" />

05    </form>

06</div>

07  

08<!-- 校验卸载form中的onsubmit 即:提交之前进行表单校验 高老四博客 -->

09<script>

10    functionvalidForm(){

11        varcodeNum = $("#codeNum").val();

12        if(codeNum =='') {

13            returnfalse;

14        }

15        //倚楼听风雨淡看江湖路

16        returntrue;

17    }

18</script>

ajaxSubmit提交

01<script src="<@ps.s/>/js/jquery.form.js"></script>//依赖脚本

02<form id="editForm"action="高老四" method="post" enctype="multipart/form-data">

03//各种表单提交

04</form>

05<script>

06//提交表单

07function saveForm(){

08    $("#editForm").ajaxSubmit({

09        type:"POST",

10        url:'${request.contextPath}/market/'+'${typeCode}'+'/save',

11        beforeSubmit:checkBeforeSubmit,

12        success:function(data) {

13            loadingHide();//隐藏 loading页面

14            data=eval("("+data+")");

15            if(data.status=='success'){//成功

16                alert("高老四博客 保存成功！");

17                window.location.href="${request.contextPath}/market/"+'${typeCode}';

18            }

19            if(data.status=='failed'){

20                alert(data.failedDesc);

21            }

22        }

23    });

24}

25  

26//表单校验

27function checkBeforeSubmit(){

28    //校验商户头像

29    if("${activity.sponsorLogo }"==""&&$("#sponsorLogoFile").val()==""&&uploadFlag==1){

30        $("#sponsorLogoFile").focus();

31        alert("请上传商户图标");

32        returnfalse;

33    }

34      

35    //校验商户名称

36    varsponsorName = $("#sponsorName").val();

37    if(sponsorName==""){

38        $("#sponsorName").focus();

39        alert("请输入商户名称");

40        returnfalse;

41    }

42}

43</script>

jquery的get/post提交

1.post提交

1$.post("${pageContext.request.contextPath}/comment/save.do",{"content":content,'imageCode':imageCode,'blog.id':'${blog.id}'},

2function(result){

3    if(result.success){

4        alert("评论已提成成功，审核通过后显示！");

5    }else{

6        alert(result.errorInfo);

7    }

8},"json");

2.get提交

1$.get(url, function(res){

2    if(res=="0"){

3        msg="请输入手机号！"; 

4    } else if(res=="1"){

5        msg="该手机号已经被注册过!";

6        temp="该手机号已经被注册过!";

7    }

8});

Ajax标准提交

01$.ajax({

02        type:"post",

03        url: '<%=basePath%>traineeInfo/selectCoach.do',

04        dataType:'json',

05        success:function(data){

06            varcoachName="";

07            vardata=eval(data);

08            for(vari in data){

09                /* 教练选择框 */

10                coachName +="<option value='"+data[i].coachUid+"'>"+data[i].coachName+"</option>";

11            }

12            $("#cnm").html("<select style='width:100px;' id='selectCoach'><option value='9999'>选择教练</option>"+coachName+"</select>");

13            $("#selectCoach").selectpicker();

14        }

15    })

form中的button添加onclick时间 验证表单之后提交

01<form id="saveForm"method="post" action="${rc.contextPath}/comonRedEnv/saveConfig"

02    enctype="multipart/form-data"style="background:#fff;padding-bottom:134px;">

03    //各种表单

04    <input id="form_submit"type="button" onclick="checkSubmit();"  

05        name="Submit"value="提交" style="background:#2673a0;border:1px solid #2673a0;color:#fff;"/>

06</form>

07function checkSubmit(){

08    varredEnvelopesName =$('#redEnvelopesName').val();

09    varredEnvelopesNameLen =redEnvelopesName.length;

10    if(redEnvelopesName==null||redEnvelopesName=="undefined"||redEnvelopesName==""){

11        alert("请填写红包标题！");

12        returnfalse;

13    }

14    if(redEnvelopesNameLen>50){

15        alert("红包标题必须小于50个字符");

16        returnfalse;

17    }

18  

19    vareffectStartTime =$('#effectStartTime').val();

20    if(effectStartTime==null||effectStartTime=="undefined"||effectStartTime==""){

21        alert("活动开始时间不能为空");

22    returnfalse;

23    }

24      

25    vareffectEndTime =$('#effectEndTime').val();

26    if(effectEndTime==null||effectEndTime=="undefined"||effectEndTime==""){

27        alert("活动结束时间不能为空");

28        returnfalse;

29    }

30      

31    $("#saveForm").submit();

32      

33}

js提交

方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中表单提交：

01<!-- HTML -->

02<form id="test-form">

03    <input type="text"name="test">

04    <button type="button"onclick="doSubmitForm()">Submit</button>

05</form>

06  

07<script>

08function doSubmitForm() {

09    varform = document.getElementById('test-form');

10    // 可以在此修改form的input...

11    // 提交form:

12    form.submit();

13}

14</script>

第一种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应<form>本身的onsubmit事件，在提交form时作修改：

01<!-- HTML -->

02<form id="test-form"onsubmit="return checkForm()">

03    <input type="text"name="test">

04    <button type="submit">Submit</button>

05</form>

06  

07<script>

08function checkForm() {

09    varform = document.getElementById('test-form');

10    // 可以在此修改form的input...

11    // 继续下一步:

12    returntrue;

13}

14</script>

防止重复提交

01var flag = false;

02function exchange(sid) {

03    varmobile = $("#mobile").val();

04    if(mobile=="") {

05        alert("手机号不能为空");

06        $("#mobile").focus();

07        returnfalse ;

08    }

09      

10    if(!(/^1[0-9]{10}$/.test(mobile))){

11        alert("手机号码有误，请重填");

12        $("#mobile").focus();

13        returnfalse ;

14    }

15      

16    if(!flag){

17        flag =true;

18        $.ajax({

19            url :"http://www.glorze.com",

20            cache :false,

21            async :true,

22            type :"post",

23            data : {

24                "mobile": mobile,

25                "sid": sid

26            },

27            success :function(data) {

28                flag =false;

29                if(data == "0") {

30                    BuySuccess();

31                }else if (data == "1") {

32                    alert("积分不够，请核对后再兑换！！！");

33                }else if (data == "2") {

34                    alert("创建订单失败！！！");

35                }else if (data == '3') {

36                    alert("会员信息未找到！");

37                }elseif (data == "4") {

38                    alert("手机号与流量包运营商类型或地域不匹配！！！");

39                }else {

40                    alert("兑换失败，系统异常，请联系管理员！！！");

41                }

42            },

43            error :function(data) {

44                flag =false;

45                alert("发生错误，请重试");

46            }

47        });

48    }

49}

页面控制重复提交的方式

1.如果只针对按钮做重复提交的话可以使用disabled

1$("#button").attr("disabled","disabled");

2//有返回值的时候在移除掉disabled属性

3$("#button").removeAttr("disabled");

2.也可以针对当前页面,让body中所有的元素均不可以点击

1$('body').css('pointer-events','none');

2//有返回值的时候在移除掉disabled属性

3$('body').css('pointer-events','');