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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
iphone刘海屏页面适配方法
May 07 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
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
javascript中this关键字详解
2016/12/12 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python交互式图形编程实例(一)
2017/11/17 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python WSGI的深入理解
2018/08/01 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python和php哪个容易学
2020/06/19 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
机械专业毕业生自荐信
2013/11/02 职场文书
集体备课反思
2014/02/12 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
公司建议书怎么写
2014/05/15 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2014年村官工作总结
2014/11/24 职场文书
保送生自荐信范文
2015/03/26 职场文书
南京大屠杀观后感
2015/06/02 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python