前言:
我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:
前提准备:引入脚本
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
前台页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
<script>
$(function () {
$("#ajaxSubmit").on("click",function () {
$("#ajaxForm").ajaxSubmit({
beforeSubmit:function () {
},
success:function (data) {
if (typeof(data) == "string"){
data = eval( '('+data+')');
handle(data);
}else{
handle(data);
}
}
});
});
});
function handle(data){
if(data.status == 200){
alert(data.message);
}else{
alert(data.message);
}
}
</script>
</head>
<body>
<form method="post" action="testAjax" id="ajaxForm">
姓名:<input type="text" name="name"/><br>
年龄:<input type="text" name="age"><br>
性别:男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
<br><br><br>
<input type="submit" value="同步提交"/> <input type="reset" value="重置" />
<br> <br> <br>
<input type="button" value="点我ajax提交表单" id="ajaxSubmit"/>
</form>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
后台servlet代码:
package cn.cupcat.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestAJAXContorller extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("进入了doGet方法!");
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("进入了doPost方法!");
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
String name = req.getParameter("name");
String age = req.getParameter("age");
String sex = req.getParameter("sex");
System.out.println("name = "+name + " age = " + age +" sex = "+sex);
String message = "name = "+name + " age = " + age +" sex = "+sex;
String result = getResponseResult(200,message);
resp.getWriter().print(result);
}
public static String getResponseResult(int status,String message){
return "{status: "+status+",message: '"+message+"'}";
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>upload_demo</display-name>
<servlet>
<servlet-name>testAjax</servlet-name>
<servlet-class>cn.cupcat.controller.TestAJAXContorller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>testAjax</servlet-name>
<url-pattern>/testAjax</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
注意:
ajaxSubmit()的也可以这样设置表单的method、action、表单项
type: 'post',
url: 'your url',
data: ,
success: function(data)