jQuery中的序列化

jQuery中的序列化有两种:

1.对表单进行序列化

序列表表格内容为字符串,用于 Ajax 请求。

$("#searchForm").serialize();

2.对数组进行序列化

将表单元素数组或者对象序列化。是.serialize()的核心方法。注意此方法需在较高版本的jquery版本中使用

$.param(arr)

3.测试代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<header>
    <title>Jquery测试</title>
    <script type="text/javascript" src="./jquery/jquery.min.js"></script>
</header>
<body>
<form id="searchForm">
    <input type="text" id="abc1" name="abc1" value="var1"/>输入框1
    <input type="text" id="abc2" name="abc2" value="var2"/>输入框2
    <input type="text" id="abc3" name="abc3" value="var3"/>输入框3
    <br/><br/>
    <span id="show1"></span>
    <br/>
    <span id="show2"></span>
</form>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var serialize = $("#searchForm").serialize();
        var arr = {a:1,b:2};
        $("#show1").html("serialize对表单进行序列化"+serialize);
        $("#show2").html("param对数组进行序列化"+$.param(arr));
    });
</script>

运行结果:

以上两种方法为我们在进行ajax请求时参数的封装提供了便利

原文地址:http://blog.51cto.com/12222886/2156559

时间: 2024-07-31 14:30:24

jQuery中的序列化的相关文章

JQuery中serialize() 序列化

更多2014/8/24 来源:jquery学习浏览量:1671 学习标签: serialize 本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交.下面介绍JQuery中serialize()的用法 一.serialize()定义和用法: serialize()方法通

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj

JQuery 中的Ajax

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON() /* * load(url,data,callback) * * jquery对象调用load()方法,返回内容会自动写入jquery对象内 * * url:请求路径 * * data:请求数据,以key/value形式,json数据格式 * * callback:

jQuery中的100个技巧

1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // Different ways to achieve the Document Ready event //

JQuery中的工具函数总结

前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 工具方法 ①获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.

jQuery中ajax的使用与缓存问题的解决方法

jQuery中ajax的使用与缓存问题的解决方法 1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个

JQuery中ajax的相关方法总结

前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 具体方法 ①load() 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[call

从零开始学习jQuery (六) jquery中的AJAX使用

本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 二.前言 Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个

jQuery 中 ajax 提交数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ... ajax02.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="form&qu