参数序列化$.param()

举例:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
personObj = new Object();
personObj.firstname = "John";
personObj.lastname = "Doe";
personObj.age = 50;
personObj.eyecolor = "blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body> <button>Serialize object</button> <div></div> </body>
</html>

上述返回的结果是:firstname=John&lastname=Doe&age=50&eyecolor=blue

$.param将对象或者数组序列化,序列化的值可以用于AJAX请求时的URL查询字符串

$.param(object,trad)
Parameter Description
object 必须,指定一个要被序列化的对象亦或数组
trad

可选,是否使用传统的参数序列化模式,默认false,注意要在jQuery1.4以上才能使用

$(document).ready(function(){
personObj ={
          a: {
            one: 1,
            two: 2,
            three: 3
            },
          b: [ 1, 2, 3 ]
        }
$("button").click(function(){
document.body.innerHTML=(decodeURIComponent($.param(personObj,true)));
});
});

上述传统序列化显示的结果是:a=[object+Object]&b=1&b=2&b=3

如果是

 $("div").text(decodeURIComponent($.param(personObj)));

将true去掉,将成为a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

表单序列化$.serialize()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body> <form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form> <button>Serialize form values</button>
<div></div>
</body>
</html>

结果是:FirstName=Mickey&LastName=Mouse

$(selector).serialize()

序列化表单值并创建一个编码过的url文本

你可以选择一个或更多的表单元素(比如input和textarea),或者表单元素本身

序列化的值可以被用于在创建一个AJAX请求的时候,组合URL查询字符串

表单序列化$.serializeArray()

将表单元素序列化成对象数组

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
console.log(x);
});
});
</script>
</head>
<body> <form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form> <button>Serialize form values</button>
<div id="results"></div>
</body>
</html>

控制台输出的结果是

语法格式为:

$(selector).serializeArray()

jQuery ajax序列化函数的更多相关文章

  1. jQuery Ajax 操作函数及deferred对象

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  2. jQuery Ajax 操作函数

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  3. JQ-jQuery-Ajax:jQuery Ajax 操作函数

    ylbtech-JQ-jQuery-Ajax:jQuery Ajax 操作函数 1.返回顶部 1. jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允 ...

  4. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  5. jQuery Ajax 操作函数 (七)

    函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxE ...

  6. springboot统一ajax返回数据格式,并且jquery ajax success函数修改

    服务端代码: package com.zhqn.sc.cfg; import org.springframework.core.MethodParameter; import org.springfr ...

  7. jquery ajax error函数详解

    代码:$(document).ready(function() {            jQuery("#clearCac").click(function() {        ...

  8. jquery ajax error函数和及其参数详细说明(转载)

    使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细的说明了ajax中error函数和函数中各个参数的用法.一般error函数返回的参数有三个 ...

  9. jquery ajax error 函数的参数及使用

    使用jquery的ajax方法向服务器发送请求的时候,可选的回调函数有success.complete.beforeSend.error函数等.error函数常用来进行错误信息的处理,这里着重提一下e ...

随机推荐

  1. es6系列-变量声明

    es6系列所有文章都是阅读阮一峰老师的<ES6标准入门>(第2版)所做的读书笔记.方便日后查阅相关基础知识. git地址: https://github.com/rainnaZR/es6- ...

  2. 【redis】5.spring boot项目中,直接在spring data jpa的Repository层使用redis +redis注解@Cacheable直接在Repository层使用,报错问题处理Null key returned for cache operation

    spring boot整合redis:http://www.cnblogs.com/sxdcgaq8080/p/8028970.html 首先,明确一下问题的场景 之前在spring boot整合re ...

  3. Android View 布局流程(Layout)完全解析

    前言 上一篇文章,笔者详细讲述了View三大工作流程的第一个,Measure流程,如果对测量流程还不熟悉的读者可以参考一下上一篇文章.测量流程主要是对View树进行测量,获取每一个View的测量宽高, ...

  4. Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall

    from: https://wandersick.blogspot.com/2016/06/resolving-root-partition-is-filling-up.html This is a ...

  5. python_获得列表中重复的项的索引

    a = ['b','a', 'b', 'c', 'a', 'c','d'] b=[] f=[] for i in a: c=[] for item in enumerate(a): if item[1 ...

  6. Cocos2d-x移植安卓的笔记

    一.下载所需软件 Java SDK   http://www.oracle.com/technetwork/java/javase/downloads/index.html  Windows x64 ...

  7. 【iOS开发-79】利用Modal方式实现控制器之间的跳转

    利用Modal方法.事实上就是以下两个方法的运用. Modal方式的切换效果是从底部呈现. -(void)clickModal{ WPViewController *wp=[[WPViewContro ...

  8. jackrabbit官方英文文档加补充(转载)

    关于Jackrabbit To get started with Jackrabbit you should first become familiar with the JCR API. Downl ...

  9. bzoj-2251 外星联络

    题意: 给出一个字符串,求出现次数超过1的子串的出现个数. 字符串长度<=3000: 题解: 题目问的是子串的个数.那么首先我们要找到全部的子串. 而字符串的全部后缀的前缀能够不重不漏的表示全部 ...

  10. 使用 HttpWebRequest 向网站提交数据

    HttpWebRequest 是 .net 基类库中的一个类,在命名空间 System.Net 下面,用来使用户通过 HTTP 协议和服务器交互. HttpWebRequest 对 HTTP 协议进行 ...