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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
smtp邮件发送一例
2006/10/09 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
js实现课堂随机点名系统
2019/11/21 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python交互式图形编程实例(二)
2017/11/17 Python
pandas中的series数据类型详解
2019/07/06 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
合同协议书格式
2014/04/18 职场文书
集中采购方案
2014/06/10 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
婚前协议书范本两则
2014/10/16 职场文书
体育教师个人工作总结
2015/02/09 职场文书
离婚起诉书范本
2015/05/18 职场文书
女儿满月酒致辞
2015/07/29 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python