1. JSP页面
<form id="form1">
用户名:<input type="text" name="username" id="username"><br><br>
密 码:<input type="password" name="password"
id="password"><br><br>
邮 箱:<input type="text" name="email" id="email"><br><br>
<input type="button" value="异步提交表单" id="formbutton" />
</form>
2. ajax表单数据json提交
第一种,自己往json中添加数据。
<script type="text/javascript">
$(function() {
$("#formbutton").click(function() {
$.ajax({
url : "formServlet",
data : {
username : $("#username").val(),
password : $("#password").val(),
email : $("#email").val(),
},
type : "POST",
success : function(data) {
}
})
})
})
</script>
第二种,通过序列化数组
<script type="text/javascript">
$(function() {
$("#formbutton").click(function() {
//将表单里的选项,序列化成一个字符串
var data = $("#form1").serializeArray();
//将信息打印到网页上的控制台
console.info(data);
//alert(data);
$.ajax({
url : "formServlet",
data:data,
type:"POST",
success : function(data) {
}
})
})
})
</script>
3. ajax表单数据字符串提交
<script type="text/javascript">
$(function() {
$("#formbutton").click(function() {
//将表单里的选项,序列化成一个字符串
var data = $("#form1").serialize();
$.ajax({
url : "formServlet",
data:data,
type:"POST",
success : function(data) {
}
})
})
})
</script>
4. Servlet
接收请求参数,并对请求参数进行操作。
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String username=request.getParameter("username");
String password=request.getParameter("password");
String email=request.getParameter("email");
System.out.println(username);
System.out.println(password);
System.out.println(email);
PrintWriter out = response.getWriter();
}