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="提交" οnclick="buttonSubmit()">
</form>
<br><br><h2>3 button点击form的onclick提交</h2>
<form id="form3" action="#" οnclick="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="#" οnclick="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="#" οnclick="form5Submit()" >
<input id="userName" name="userName" value="yp5">
<br><br><input id="age" name="age" value="25">
<br><br><a href="javascript:;" οnclick="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:;" οnclick="form6Submit1()">提交1</a>
<br><br><a href="javascript:;" οnclick="form6Submit2()">提交2</a>
</div>
<br><br><h2>7 事件执行顺序 input onclick→form onclick→form onsubmit </h2>
<form id="form7" action="<%=path%>/nursery/submitForm.itm" οnclick="form7Onclick()" οnsubmit="validator();return true;">
<input id="userName" name="userName" value="yp7" >
<br><br><input id="age" name="age" value="27">
<br><br><input type="submit" οnclick="form7Submit()">
</form>
<br><br><h2>8 表单form的onsubmit事件须和input type="submit"的一起配套才能使用</h2>
<form id="form8" οnsubmit="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:;" οnclick="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" οnclick="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);
}
