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 相关文章推荐
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
ES6的新特性概览
Mar 10 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js校验开始时间和结束时间
May 26 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
一个C/C++编程面试题
2013/11/10 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
高中语文教学反思
2014/01/16 职场文书
医院院务公开实施方案
2014/05/03 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
《鲸》教学反思
2016/02/23 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL