1. FormData
1.1 介绍
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量。同时FromData可以接收到二进制文件(可以用来做异步上传文件),serialize
只能序列化简单的数据。
1.2 用于文件上传时
文件上传时会有坑,建议大家好好看我这里写的。
form表单添加 enctype="multipart/form-data"
<form enctype="multipart/form-data" method="post" id="fileinfo">
<label>图片:</label>
<input type="file" name="file" />
<input type="submit" value="提交" />
</form>
ajax中必须加入下面这俩个配置
processData: false,
contentType: false,
var formData = new FormData($("#fileinfo")[0]);
$.ajax({
dataType: "json",
type: "post", // 提交方式 get/post
url: '/dog/saveOrUpdate.action', // 需要提交的 url
data: formData,
processData: false,
contentType: false,
success: function(data) {
}
});
1.3 注意参数
new FormData的参数是一个DOM对象,而非jQuery对象
我们通过[index]的方法,来得到相应的DOM对象。
var formData = new FormData($("#fileinfo")[0]);
1.4 用法
下面通过一个保存狗的小例子来演示这个用法。
1.4.1 html 代码
<form id="itemForm" enctype="multipart/form-data">
<div class="form-body">
<div class="form-group">
<label>流浪狗名称</label>
<input id="dogName" name="dogName" type="text" value="" />
</div>
<div class="form-group">
<label>流浪狗年龄</label>
<input id="dogAge" name="dogAge" type="text" value="" />
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn green-jungle">提 交</button>
<button type="reset" class="btn grey-salsa btn-outline">取 消</button>
</div>
</form>
1.4.2 ajax 代码
var itemForm = $('#itemForm');
var formData = new FormData($("#itemForm")[0]);
$.ajax({
dataType: "json",
// 提交方式 get 或 post
type: "post",
// 需要访问的 Servlet 的映射路径 urlPatterns
url: '/saveDog',
data: formData,
processData: false,
contentType: false,
success: function(data) {
}
});
1.4.3 Servlet 代码
/**
* Servlet3.0 注解 WebServlet 用来描述一个 Servlet。
* 属性 name 描述 Servlet 的名字,可选。
* 属性 urlPatterns 定义访问的 URL。(定义访问的 URL 是必选属性)。
*/
@WebServlet(name="SaveDogServlet", urlPatterns="/saveDog")
public class SaveDogServlet extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException{
// 防止中文乱码
request.setCharacterEncoding("utf-8");
// 获取前端表单通过 ajax 传来的 dogName
String dogName = request.getParameter("dogName");
// 获取前端通过 ajax 传来的 dogAge
String dogAge = request.getParameter("dogAge");
// 打印前端通过 ajax 传来的数据
System.out.println("dogName: " + dogName);
System.out.println("dogAge: " + dogAge);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
}
小知识点
这种通过 @WebServlet 注解配置 Servlet 类似于我们在 web.xml 里这么配置
<servlet>
<servlet-name>SaveDogServlet</servlet-name>
<servlet-class>com.ypf.web.servlet.SaveDogServlet</servlet-class>
</servlet>
<!-- servlet 映射关系配置 -->
<servlet-mapping>
<servlet-name>SaveDogServlet</servlet-name>
<url-pattern>/saveDog</url-pattern>
</servlet-mapping>
2. serialize
2.1 介绍
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
你可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
使用serialize
前
使用serialize
后
2.2 用法
这里只列举 ajax 代码,其他代码和上述代码完全相同。
2.2.1 ajax
// 获取form表单的jquery对象
var itemForm= $('#itemForm');
$.ajax({
dataType: "json",
// 提交方式 get 或 post
type: "post",
// 需要访问的 Servlet 的映射路径 urlPatterns
url: "/saveDog",
data: itemForm.serialize(),
success: function(data) {
}
});