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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
运动会表扬稿大全
2014/01/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
暂住证证明
2015/06/19 职场文书
消防宣传语大全
2015/07/13 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Golang 并发编程 SingleFlight模式
2022/04/26 Golang