ajax获得表单值的俩种方法

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) {
       
      }
});

3. 相关视频推荐

JavaWeb视频教程（JSP/Servlet/上传/下载/分页/MVC/三层架构/Ajax）

https://www.bilibili.com/video/av29086718?from=search&seid=10477065192336901773

Servlet入门和Tomcat

https://www.bilibili.com/video/av44994659/?p=1

4. 欢迎关注

欢迎关注博主公众号。在这里你可以收获一个java后端学习的环境，一个问答的学习环境。