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 相关文章推荐
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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文件上传原理简单分析
2011/05/29 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python 列表的清空方式
2020/01/13 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Python使用Pygame绘制时钟
2020/11/29 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
个人求职简历的自我评价
2013/10/19 职场文书
专业销售业务员求职信
2013/11/18 职场文书
学生励志演讲稿
2014/01/06 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书