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编程起步(第四课)
Feb 27 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Vue如何从1.0迁移到2.0
Oct 19 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
升职自荐书范文
2013/11/28 职场文书
重阳节标语大全
2014/10/07 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
化验员岗位职责
2015/02/14 职场文书
毕业证明模板
2015/06/19 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers