在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,jquery有serialize()、serializeArray()方法,可以一次性获取到参数,如我们有form表单如下:

与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
 


												

JQuery中serialize()、serializeArray()和param()方法示例介绍的更多相关文章

  1. jquery serialize()、serializearray()已经$.param方法

    serialize: 序列表表格内容为字符串,用于 Ajax 请求.可以对整个form,也可以只针对某部分. HTML 代码: <p id="results">< ...

  2. JQuery中serialize() 序列化

    更多2014/8/24 来源:jquery学习浏览量:1671 学习标签: serialize 本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value ...

  3. JQuery中serialize()

    一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比 ...

  4. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  5. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  6. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  7. jquery中一些容易忽略的方法

    jquery.ajaxPrefilter:([dataTypes],handle(options,originalOptions,jqXHR)):在发送请求之前和执行$.ajax之前操作options ...

  8. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  9. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

随机推荐

  1. tomcat 监控

    主要监控JVM (1)JPS(快速获取Java的PID) 这个是jdk包里的 显示Java进程的 +l +v +m (2)jstack 命令格式: 常用说明: (3)jmap 现在列举生产中遇到的JV ...

  2. 【BZOJ 2555】SubString

    http://www.lydsy.com/JudgeOnline/problem.php?id=2555 一个字符串在原串中的出现次数就是这个字符串对应后缀自动机上的状态的\(|Right|\),要求 ...

  3. 评价指标ROC,PR

    之前实习的时候一直见公司里面的人说什么AUC, 实际AUC就是ROC曲线的面积 PR是precise和recall曲线,和ROC的区别是,当测试集中的正负样本分布变化的时候,ROC曲线能够保持不变,而 ...

  4. HTML5文件系统API和资料整理

    来着火狐开发网络的官方文档:点我打开 : W3C的官方文档: 点我打开 : 园友的博客:  点我打开: 浏览器兼容性, 好了就chrome支持, 我刚刚更新的火狐37也不支持, nice, 太nice ...

  5. SVN安装配置和使用教程

    注意:location :为安装文件位置,Repositories:为管理的代码仓库的位置,若选中Use secure connection前面的Checkbox,则表示安全连接[https],这里的 ...

  6. js window.open 打开新窗体 参数设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. C# 公历转农历

    /// <summary>     /// LunDay 的摘要说明.     /// 用法说明     /// 直接调用即可,比较简单     /// </summary> ...

  8. 环信webim1.1.2版本在windows下npm环境搭建错误解决

    1.1.2版本的webim从ui到整体的代码结构都做了很大改变,从代码结构上采用node.js的环境进行开发和打包,最终打包的输出项目,不依赖node.js的环境进行运行,得益于webpack的打包实 ...

  9. Codeforces Round #389 Div.2 C. Santa Claus and Robot

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. magento app/design/adminhtml/default/default/template/sales/order/view/info.phtml XSS Vul

    catalogue . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link: http://www.freebuf. ...