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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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:风雨欲来 路在何方?
2006/10/09 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python Grid使用和布局详解
2018/06/30 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python实现静态web服务器
2019/09/03 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
pandas分批读取大数据集教程
2020/06/06 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
客服工作职责
2013/12/11 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
美容院员工规章制度
2015/08/05 职场文书