详细连接

ajax获得表单值的俩种方法

2018年06月23日 17:12:02  阅读数：2234

 

FormData

介绍

FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量。同时FromData可以接收到二进制文件（可以用来做异步上传文件），serialize只能序列化简单的数据。

注意：参数

new FormData的参数是一个DOM对象，而非jQuery对象 

我们通过[index]的方法，来得到相应的DOM对象。

var formData = new FormData($("#fileinfo")[0]);

• 1

用于文件上传

form表单添加 enctype="multipart/form-data"

      
 
       图片: 
        
        
      

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

 

用法

html

      
 
       
 
        
 
          * 流浪狗名称 
         
 
          
 
            
          
 
         
 
        
 
        
 
          * 流浪狗品种 
         
 
          
 
            
          
 
         
 
        
 
        
 
          * 流浪狗年龄 
         
 
          
 
            
          
 
         
 
        
 
        
 
          * 流浪狗图片 
         
 
          
 
            
          
 
         
 
        
 
       
 
       
 
        
 
         
 
          提 交 
          取 消 
         
 
        
 
       
 
      

 

ajax

var itemForm = $('#itemForm');                var formData = new FormData($("#itemForm")[0]); $.ajax({ dataType: "json", type: "post", // 提交方式 get/post url: '/dog/saveOrUpdate.action', // 需要提交的 url data: formData, processData: false, contentType: false, success: function(data) { // 登录成功或者失败的提示信息 if (data.status == 200 && data.msg == "OK") { } else { } }, error: function (response, ajaxOptions, thrownError) { } });

serialize

介绍

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

你可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

使用serialize前 

使用serialize后 

用法

ajax

var commentId = $("#commentId").val();                //获取form表单的jquery对象                var commentInfoForm = $('#commentInfoForm'); $.ajax({ dataType: "json", type: "post", // 提交方式 get/post url: '/comment/saveOrUpdate.action', // 需要提交的 url data: commentInfoForm.serialize(), success: function(data) { // 登录成功或者失败的提示信息 if (data.status == 200 && data.msg == "OK") { } else { } }, error: function (response, ajaxOptions, thrownError) { } });