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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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的autoload机制的实现解析
2012/09/15 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JavaScript字符串对象
2017/01/14 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python实现月食效果实例代码
2019/06/18 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python实现IOU计算案例
2020/04/12 Python
tensorflow常用函数API介绍
2020/04/19 Python
python 错误处理 assert详解
2020/04/20 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
双语教学实施方案
2014/03/23 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
高中生逃课检讨书
2014/10/10 职场文书
家长通知书家长意见
2015/06/03 职场文书