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做的一个简单的屏幕锁定提示框
Mar 26 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
JS实现拼图游戏
Jan 29 Javascript
JS实现简单打字测试
Jun 24 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 静态页面中显示动态内容
2009/08/14 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
Smarty模板语法详解
2019/07/20 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
Gird事件机制初级读本
2007/03/10 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
武当山导游词
2015/02/03 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS