表单提交方式解析

来源：互联网发布：网络诈骗5000元编辑：程序博客网时间：2024/06/10 09:15

jsp文件 formHandle.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+(request.getContextPath().equals("/")?"":request.getContextPath());%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单操作</title><script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.min.js" ></script></head><body>1 <h2>submit 提交</h2> <form id="form1" action="<%=path%>/nursery/submitForm.itm"  > <input id="userName" name="userName" value="yp1"> <br><br><input id="age" name="age" value="21"> <br><br><input type="submit" value="提交">  </form> <br><br><h2>2 button的onclick提交</h2> <form id="form2" action="#"  > <input id="userName" name="userName" value="yp2"> <br><br><input id="age" name="age" value="22"> <br><br><input type="button" value="提交" onclick="buttonSubmit()">  </form>   <br><br><h2>3 button点击form的onclick提交</h2> <form id="form3" action="#" onclick="form3Submit()"> <input id="userName" name="userName" value="yp3"> <br><br><input id="age" name="age" value="23"> <br><br><input type="button" value="提交" >  </form>   <br><br><h2>4 submit点击form的onclick提交</h2> <form id="form4" action="#" onclick="form4Submit()"  > <input id="userName" name="userName" value="yp4"> <br><br><input id="age" name="age" value="24"> <br><br><input type="submit" value="提交" >  </form>    <br><br><h2>5 href点击form的onclick 提交</h2> <form id="form5" action="#" onclick="form5Submit()" > <input id="userName" name="userName" value="yp5"> <br><br><input id="age" name="age" value="25"> <br><br><a href="javascript:;" onclick="aclick()">提交</a> </form>   <br><br><h2>6 表单 提交</h2> <div id="div6"> <input id="userName" name="userName" value="yp6"> <br><br><input id="age" name="age" value="26"> <br><br><a href="javascript:;" onclick="form6Submit1()">提交1</a> <br><br><a href="javascript:;" onclick="form6Submit2()">提交2</a> </div>    <br><br><h2>7 事件执行顺序 input onclick→form onclick→form onsubmit  </h2> <form id="form7" action="<%=path%>/nursery/submitForm.itm" onclick="form7Onclick()" onsubmit="validator();return true;"> <input id="userName" name="userName" value="yp7" > <br><br><input id="age" name="age" value="27"> <br><br><input type="submit"  onclick="form7Submit()">  </form>    <br><br><h2>8 表单form的onsubmit事件须和input type="submit"的一起配套才能使用</h2> <form id="form8"   onsubmit="validator8()"> <input id="userName" name="userName" value="yp8" > <br><br><input id="age" name="age" value="28"> <br><br><input type="submit"  >  <br><br><a href="javascript:;" onclick="form8Submit()">提交2</a> </form>   <br><br><h2>9 表单的属性</h2> <form id="form9" > <input id="userName" name="userName" value="yp9" > <br><br><input id="age" name="age" value="29"> <br><br><input type="button"  onclick="form9Submit()">  <div id="div9"></div> </form>  <script type="text/javascript">     function buttonSubmit(){    var form2 = document.getElementById("form2");    form2.action="<%=path%>/nursery/submitForm.itm";    form2.submit();    }        function form3Submit(){    var form3 = document.getElementById("form3");    form3.action="<%=path%>/nursery/submitForm.itm";    form3.submit();    }        function form4Submit(){    var form4 = document.getElementById("form4");    form4.action="<%=path%>/nursery/submitForm.itm";    form4.submit();    }         function aclick(){    alert("a 的onclick事件先于form 表单的onclick事件执行 ！");    }        function form5Submit(){    var form5 = document.getElementById("form5");    form5.action="<%=path%>/nursery/submitForm.itm";    form5.submit();    }        function form6Submit1(){     var userName = $('#div6 #userName').val();     var age = $('#div6 #age').val();     var param = new Array();     param.push({"name":"userName","value":userName});     param.push({"name":"age","value":age});     var url = "<%=path%>/nursery/submitForm.itm";     createFormSubmit1(url,param);    // $("#form6").action="<%=path%>/nursery/submitForm.itm";    // $("#form6").attr('action','<%=path%>/nursery/submitForm.itm');    //$("#form6").submit();     }     function createFormSubmit1(url,param){    var form = document.createElement("form");    form.action="<%=path%>/nursery/submitForm.itm";    form.target="_self";    for(var i = 0; i < param.length; i++){    var input = document.createElement("input");    input.name = param[i].name;    input.value = param[i].value;    form.appendChild(input);    }    form.submit();    }        function form6Submit2(){    var userName = $('#div6 #userName').val();    var age = $('#div6 #age').val();    var param = new Array();    param.push({"name":"userName","value":userName});    param.push({"name":"age","value":age});    var url = "<%=path%>/nursery/submitForm.itm";    createFormSubmit2(url,param);   }    function createFormSubmit2(url,param){   var form = $('<form></form>');      form.attr('action',url);      form.attr('target','_self');      $(param).each(function(i,o){      var input = $('<input name="'+o.name+'" value="'+o.value+'">');      form.append(input);      });      form.submit();   }       function validator(){   alert('表单onsubmit事件');   return  true;   }      function form7Onclick(){   alert('表单onclick事件');   }      function form7Submit(){   alert('submit  onclick事件');   var form7 = document.getElementById("form7");form7.action="<%=path%>/nursery/submitForm.itm";form7.submit();   }      function validator8(){    alert('表单onsubmit事件');   var form8 = document.getElementById("form8");form8.action="<%=path%>/nursery/submitForm.itm";form8.submit();   }      function form8Submit(){    alert('submit  onclick事件');  }        function form9Submit(){   var form9 = document.getElementById("form9");    $('#div9').append('<br>action:'+form9.action);    $('#div9').append('<br>length:'+form9.length);    $('#div9').append('<br>method:'+form9.method);    $('#div9').append('<br>name:'+form9.name);    $('#div9').append('<br>target:'+form9.target);    $('#div9').append('<br>className:'+form9.className);    $('#div9').append('<br>dir:'+form9.dir);    $('#div9').append('<br>lang:'+form9.lang);    $('#div9').append('<br>title:'+form9.title); }  </script></body></html>

submitForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+(request.getContextPath().equals("/")?"":request.getContextPath());%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单操作</title></head><body> 姓名：${userName} 年龄：${age} </body></html>

java后台

@RequestMapping("submitForm")public void submitForm(HttpServletRequest req,Model model) {           String userName = req.getParameter("userName");           String age = req.getParameter("age");           model.addAttribute("userName",userName);           model.addAttribute("age",age);}

0 0