jquery form表单序列化

一、serialize()

作用

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

语法

$(selector).serialize();

比如

$("button").click(function(){
  $("div").text($("form").serialize());
});

二、注意点

不能序列化file文件类型的input,只适用于一些常用的类型例如text、checkbox、select、date等。

三、FormData 对象

FormData的封装方式,可以将form表单中的内容封装成formdata的数据格式 ,file文件类型的数据同样可以封装。

var formdata = new FormData($(‘#form‘)[0]);

需要注意的是FormData是JavaScript对象,而$是jQuery对象。所以需要进行转化。

jQuery对象转成DOM对象:

1、jQuery对象是一个数据对象,可以通过[index]方法获得相应的DOM对象。

var $form=$(‘#form‘); //得到jQuery对象

var form=$("form")[0]; //转换成DOM对象

2、jQuery也可以通过.get(index)方法得到相应的DOM对象

var $form=$(‘#form‘); //得到jQuery对象

var form=$form.get(0); //得到DOM对象

DOM对象转成jQuery对象:

只需要用$()将DOM对象包装起来,就能获得jQuery对象了

var form=document.getElementById("form"); //得到DOM对象

var $v=$(form); //转成jQuery对象

四、参数

$.ajax的contentType默认数据格式是name=value,每组之间用 & 联接。

processData是Boolean类型的参数,默认为true。和contentType配合使用。

但是form表单用FormData封装之后就不在是contentType的默认数据格式了,所以要设置参数contentType: flase, processData: false.

也有说以formdata的方式提交时需要添加async:  false, 同步,否则后台无法接收到前台传过来的file文件数据。不过我在实际项目中没有添加async:  false也完全正确,没有任何报错。

(over)

原文地址:https://www.cnblogs.com/note-book/p/9750254.html

时间: 2024-08-03 01:16:52

jquery form表单序列化的相关文章

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

原生js实现form表单序列化

大家都知道在jquery中有相应的表单序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("form").serialize

jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post(

jquery将表单序列化json对象

$.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serializeArray(), function (i, o) { var n = o.name, v = o.value; count++; obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v]; }); //obj.

spring mvc Controller与jquery Form表单提交代码demo

1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +":"+ request.getServerPort() + request.getContextPath() + "/"; %> <script language="javascript" type="text/javascript

jQuery实现form表单序列化转换为json对象功能示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery form序列化转换为json对象</title> <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> </script> </hea

form 表单序列化参数,ajax提交

①form表单的参数序列化后,然后提交. $.ajax({ type: 'post', url:$form1.attr("action"), data:$form1.serializeArray(),//序列化参数 dataType:"json", success: function(json){ if("200" == json.statusCode){ }else{ alertMsg.warn(json.message); } } }); ②

ajax上传文件 基于jquery form表单上传文件

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到用户填写的数据 var form_data_obj = new FormData(); form_data_obj.append('username',$('#id_username').val()); form_data_obj.append