传统form方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 标签</title>
</head>
<body>
<form action="servlet/DoRequestServlet" method="get">
<p>
姓名: <input type="text" name="name" />
</p>
<p>
地址: <input type="text" name="address" />
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
测试运行
反馈结果（这里不展示后台代码）
基于button方式改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 标签</title>
</head>
<body>
<button type="button" onclick="clickEvent()">更新</button>
<div>
<p>
姓名: <input type="text" name="name" />
</p>
<p>
地址: <input type="text" name="address" />
</p>
</div>
</body>
<script type="text/javascript">
function clickEvent() {
var turnForm = document.createElement("form");
// 一定要加入到body中！！
document.body.appendChild(turnForm);
turnForm.method = 'get';
turnForm.action = 'servlet/DoRequestServlet';
// 创建隐藏表单
var name = document.getElementsByName("name")[0].value;
var address = document.getElementsByName("address")[0].value;
var nameElement = document.createElement("input");
nameElement.setAttribute("name", "name");
nameElement.setAttribute("type", "hidden");
nameElement.setAttribute("value", name);
turnForm.appendChild(nameElement);
var addressElement = document.createElement("input");
addressElement.setAttribute("name", "address");
addressElement.setAttribute("type", "hidden");
addressElement.setAttribute("value", address);
turnForm.appendChild(addressElement);
// 提交
turnForm.submit();
}
</script>
</html>
测试运行
反馈结果（这里不展示后台代码）
基于 h5新特性form元素改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 标签</title>
</head>
<body>
<button type="button" onclick="clickEvent()">更新</button>
<div>
<p>
姓名: <input type="text" name="name" />
</p>
<p>
地址: <input type="text" name="address" />
</p>
</div>
</body>
<script type="text/javascript">
function clickEvent() {
var turnForm = document.createElement("form");
turnForm.setAttribute("id", "form1");
// 一定要加入到body中！！
document.body.appendChild(turnForm);
// 表单属性
turnForm.method = 'get';
turnForm.action = 'servlet/DoRequestServlet';
// 新增的form属性
var nameElement = document.getElementsByName("name")[0];
var addressElement = document.getElementsByName("address")[0];
// form中的id属性 匹配 input中的form属性
nameElement.setAttribute("form", "form1");
addressElement.setAttribute("form", "form1");
// 提交
turnForm.submit();
}
</script>
</html>
测试运行
反馈结果（这里不展示后台代码）
基于异步请求XMLHttpRequest方式改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 标签</title>
</head>
<body>
<button type="button" onclick="clickEvent()">更新</button>
<div>
<p>
姓名: <input type="text" name="name" />
</p>
<p>
地址: <input type="text" name="address" />
</p>
</div>
</body>
<script type="text/javascript">
function clickEvent() {
//
var name = document.getElementsByName("name")[0].value;
var address = document.getElementsByName("address")[0].value;
// url 拼接参数
var url = "http://localhost:8080/dyWeb/servlet/DoHttpRequestServlet?name=" + name + "&address=" + address;
//
var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open("GET", url, true);
xmlHttpReq.onreadystatechange = function HandleStateChange()
{
if (xmlHttpReq.readyState == 4)
{
alert("Result = " + xmlHttpReq.responseText);
}
}
xmlHttpReq.send();
}
</script>
</html>
测试运行
反馈结果（这里不展示后台代码）
基于jquery库ajax方式改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 标签</title>
</head>
<body>
<button type="button" onclick="clickEvent()">更新</button>
<div>
<p>
姓名: <input type="text" name="name" />
</p>
<p>
地址: <input type="text" name="address" />
</p>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function clickEvent() {
//
var name = $("input[name='name']").val();
var address = $("input[name='address']").val();
// url
var url = "http://localhost:8080/dyWeb/servlet/DoHttpRequestServlet";
//
$.ajax({
type : "GET",
url : url,
data: "name=" + name + "&address=" + address,
success : function(html) {
alert("Result = " + html);
}
});
}
</script>
</html>
测试运行
反馈结果（这里不展示后台代码）
相关文档下载
链接：https://pan.baidu.com/s/1HOl_CxCUooiRjfBzcnd30g
提取码：g08w