在项目中做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. 长串英文数字强制折行解决办法css

    overflow: hidden; white-space: normal; word-warp: break-word; word-break: break-all;/*Only work in I ...

  2. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  3. 简单的JS控制button颜色随点击更改

    先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...

  4. zabbix的安装

    1  lamp环境搭建以及zabbix安装 方便的话使用yum方式(yum安装的是2.2版本) 安装epel环境 yum install -y epel-release 安装lamp环境 yum in ...

  5. 【转】c# 调用windows API(user32.dll)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  6. jQuery 图片等比缩放

    $(function(){ $('.img-box img').load(function(){ var w = $(this).width(); var h =$(this).height(); i ...

  7. jQuery打印插件jqprint

    码][JavaScript]代码     跳至 [1] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  8. 【CodeForces 699A】Launch of Collider

    维护最新的R,遇到L时如果R出现过就更新答案. #include <cstdio> #include <algorithm> using namespace std; int ...

  9. jsp动态include和静态Include

    动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp" flush="true" / ...

  10. Leetcode 110. Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...