JQuery中serialize()、serializeArray()和param()方法示例介绍


Posted in Javascript onJuly 31, 2014

下面是服务器端的jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
request.setCharacterEncoding("UTF-8"); 
String username = request.getParameter("username"); 
String content = request.getParameter("content"); 
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" 
</p></div>"); 
%>

与JQuery中其他方法一样,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,用于ajax请求。通过使用serialize()方法,可以提交本页面的所有域,代码如下:

$("#send").click(function(){ 
$.get("get1.jsp", $("#form1").serialize(), function(data, textStatus) 
$("#resText").html(data); 
});
});

当单击“提交”按钮后,所有属于form1的表单元素都能提交到后台,即使在表单中再增加字段,脚本仍然能够使用,并且不需要做其他多余工作。

用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码。

因为serialize()方法作用于JQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下JQuery代码:

$(":checkbox,:radio").serialize();

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化。

在JQuery中还有一个与serialize()类似的方法--serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。JQuery代码如下:

var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //用FireBug输出

$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。

比如将一个普通的对象序列化:

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3
Javascript 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jquery validation验证表单插件
Jan 07 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
TypeScript类型声明书写详解
Aug 28 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 #Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 #Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 #Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 #Javascript
javascript 获取函数形参个数
Jul 31 #Javascript
javascript 10进制和62进制的相互转换
Jul 31 #Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 #Javascript
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
jQuery链使用指南
2015/01/20 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python中os模块功能与用法详解
2020/02/26 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
黄河的主人教学反思
2014/02/07 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
上课玩手机检讨书
2014/02/08 职场文书
培训协议书范本
2014/04/22 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
民主生活会剖析材料
2014/09/30 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
利用python做表格数据处理
2021/04/13 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL