jQuery ajax - serialize() 方法

实例

输出序列化表单值的结果:

$("button").click(function(){
$("div").text($("form").serialize());
});

亲自试一试

定义和用法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型:

<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

$('form').submit(function() {
alert($(this).serialize());
return false;
});

输出标准的查询字符串:

a=1&b=2&c=3&d=4&e=5

注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

jquery的ajax-serialize()的更多相关文章

  1. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  2. 详解Ajax请求(三)——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

    原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...

  3. jQuery与Ajax的应用——《锋利的jQuery》(第2版)读书笔记3

    第6章 jQuery与Ajax的应用 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$ ...

  4. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

  5. jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param

    当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码 "}]; "}]; function addUser( ...

  6. 【ERROR】使用jquery的ajax出现error:readyState=4,status=500

    使用jquery的ajax出现error:readyState=4,status=500,ajax代码如下: $.ajax({ url : "../toBeFinMisManage/show ...

  7. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  10. 第八章 jQuery与Ajax应用

    Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML,它实现的无刷新更新页面,能够进行异步提交. jQuery对Ajax进行了封装,最底层的是$ ...

随机推荐

  1. [BZOJ 2743] 采花

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2743 Algorithm: 此题询问区间内出现次数超过1个的数字 明显在线做无从下手,无 ...

  2. 【暴力】Codeforces Round #398 (Div. 2) A. Snacktower

    题意不复述. 用个bool数组记录一下,如果某一天,当前剩下的最大的出现了的话,就输出一段. #include<cstdio> using namespace std; int n; bo ...

  3. jQuery当中的事件(第六章ppt)

    bink绑定事件 hover合成事件 代码示例: <!DOCTYPE html> <html> <head> <title>test1.html< ...

  4. Python的编码注释# -*- coding:utf-8 -*-

    # -*- coding:utf-8 -*-的主要作用是指定文件编码为utf-8, 因为一般默认的是ASCII码,如果要在文件里面写中文,运行时会出现乱码,加上这句之后会把文件编码强制转换为utf-8 ...

  5. Setting an appropriate geodatabase spatial domain

    原文地址:http://webhelp.esri.com/arcgisdesktop/9.1/body.cfm?tocVisable=1&ID=1470&TopicName=Setti ...

  6. 纯JS操作获取桌面路径方法

    //active 控件获取当前用户的桌面的路径的方法 var wsh = new ActiveXObject("wscript.shell"); listall(wsh.Speci ...

  7. 手把手教你调试Entity Framework 6源码

    0  摘要 本文讲述在Visual Studio 2013(VS 2013)下调试Entity Framework 6(EF 6)源码的配置过程.原则上,VS 2012也适用. 之前打算编写<E ...

  8. kernel简介

    内存管理 一般来看有三种类型的地址:物理地址.线性地址和逻辑地址,逻辑地址的精髓在于将地址分成两部分:段基地址+偏移,翻译的过程如下: 线性地址的精髓在于将所有的内存按照一定的大小分成了一页一页,对多 ...

  9. C#之鼠标模拟技术

    游戏程序的操作不外乎两种——键盘输入控制和鼠标输入控制,几乎所有游戏中都使用鼠标来改变角色的位置和方向,本文主要是讲述如何使用C#调用Windows API函数实现鼠标模拟操作的功能.首先通过结合Fi ...

  10. Laravel 5 系列教程三:视图变量传递和Blade

    免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上 ...