jquery 序列化form表单

时间:2022-09-14 14:55:36

1.为什么要将form表单序列化?

ajax上传form表单的原始方式,是将form表单中所需要的键值对先获取,然后再组装成数据(两种方式:http:localhost:8080/test.do?personName=张三&sex=1  /   json的格式),这种方式有大量的form表单中的数据要获取,序列化的方式,只用调用一个方法即可获取上述两种方式的数据。

2.使用jquery序列化

<form id="test-form" action=""  >

  <input name="person.name"  value=“张三“>

<input name="person.sex"  value="1“>

<!-- 测试被display修饰的元素是否会被序列化 -->

<input   style="display:none;" name="person.age"  value="1“>

<!-- 测试没有name属性的元素是否会被序列化 -->

<input    value="1“>

</form>

1.获取url带参数形式的数据

console.info($("#test-form").serialize() ) ;  //这里是使用jquery序列化的方法。

序列化之后的结果:“&person.name=张三(这里中文会被编码)&person.sex=1&person.age=1”

由此可见被display修饰的元素也会被序列化,没有name属性的input框不会被序列化,因为序列化的本质是key-value的形式

2.获取json对象

console.info($("#test-form").serializeObject());

序列化之后的结果:{"person.name":"张三","person.sex":"1","person.age"}

被display修饰的元素依然会被序列化

3.select/textarea等元素是否能被序列化?

未做测试,但是可以写input的隐藏域来代替这是标签

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

  1. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  2. jquery序列化form表单

    在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化. jquery提供的serialize方法能够实现. $("#searchForm").seriali ...

  3. jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type &equals; json)

    1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...

  4. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  5. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  6. 基于Bootstrap&plus;jQuery&period;validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  8. jQuery控制form表单元素聚焦

      CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...

  9. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. jquery中css获取颜色属性

    Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...

  2. 在移动端如何选择字体大小和布局的单位&comma;px或dp&quest;

    android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px.这些单位如何换算,是设计师.开发者需要了解的关键. 简单理解的话,px(像素)是我们UI设计师在PS ...

  3. Java学习笔记(一):数据类型与变量

    数据类型 Java中存在2种数据类型,下面我们来详解一下: 基本数据类型: 引用数据类型: 可以用一张表来记录: 基本数据类型 整型 byte:1个字节8位,取值范围为:[-128, 127],直接写 ...

  4. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  5. numpy中矩阵乘法,星乘&lpar;&ast;&rpar;和点乘&lpar;&period;dot&rpar;的区别

    import numpy a = numpy.array([[,], [,]]) b = numpy.array([[,], [,]]) 星乘表示矩阵内各对应位置相乘,矩阵a*b下标(0,0)=矩阵a ...

  6. 20155205 2016-2017-2 《Java程序设计》第6周学习总结

    20155205 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 在Java中,输入串流代表对象为Java.io.InputStream实例,输出串流 ...

  7. 在eclipse中创建web项目&lpar;非myeclipse&rpar;

    如何创建dynamic web project项目 本文的演示是从本地文件创建dynamic web project,从svn检出的同时创建dynamic web project于此类似.我们推荐使用 ...

  8. ifup&comma;ifdown命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/jing99/p/7881779.html ifup命令网络配置 ifup命令用于激活指定的网络接口.ifdown命令用 ...

  9. 酷到没朋友—— Cafflano便携式手磨手冲一体壶

    又一款外国新玩具~ 设计紧凑,手磨.滤架.滤壶融合的毫无ps痕迹! 简直是出差旅行,杀人越货必备良品!废话不多说,上图: 肿么样,一壶在手,天下我有~~~哈哈哈~~~

  10. SQL单行函数和多行函数

    单行函数和多行函数示意图: 单行函数分为五种类型:字符函数.数值函数.日期函数.转换函数.通用函数 单行函数: --大小写控制函数 select lower('Hello World') 转小写, u ...