教程
jQuery中hide()方法用法实例 jQuery中slideUp()方法用法分析 jQuery中fadeOut()方法用法实例 jQuery中animate()方法用法实例 jQuery中width()方法用法实例 jQuery中height()方法用法实例 jQuery中val()方法用法实例 jQuery中html()方法用法实例 jQuery中append()方法用法实例 jQuery中prepend()方法用法实例 jQuery中after()方法用法实例 jQuery中before()方法用法实例 jQuery中replaceWith()方法用法实例 jQuery中remove()方法用法实例 jQuery中detach()方法用法实例 jQuery中click事件用法实例 jQuery中focus事件用法实例 jQuery中mouseover事件用法实例 jQuery中change事件用法实例 jQuery中ajax的load()方法用法实例 jQuery中ajax的get()方法用法实例 jQuery中ajax的post()方法用法实例 jQuery中的jQuery()方法用法分析 jQuery.holdReady()方法用法实例 jQuery中each()方法用法实例 jQuery中size()方法用法实例 jQuery对象的length属性用法实例 jQuery对象的selector属性用法实例 jQuery的context属性用法实例 jQuery中get()方法用法实例 jQuery中index()方法用法实例 jQuery中data()方法用法实例 jQuery中removeData()方法用法实例 jQuery中queue()方法用法实例 jQuery中dequeue()方法用法实例 jQuery中clearQueue()方法用法实例 jQuery中element选择器用法实例 jQuery中:eq()选择器用法实例 jQuery中:gt选择器用法实例 jQuery中:lt选择器用法实例 jQuery中:header选择器用法实例 jQuery中:animated选择器用法实例 jQuery中:first选择器用法实例 jQuery中:last选择器用法实例 jQuery中:not选择器用法实例 jQuery中:focus选择器用法实例 jQuery中:contains选择器用法实例 jQuery中:empty选择器用法实例 jQuery中:has选择器用法实例 jQuery中:hidden选择器用法实例 jQuery中:visible选择器用法实例 jQuery中[attribute]选择器用法实例 jQuery中[attribute!=value]选择器用法实例 jQuery中[attribute=value]选择器用法实例 jQuery中[attribute^=value]选择器用法实例 jQuery中[attribute*=value]选择器用法实例 jQuery中:first-child选择器用法实例 jQuery中:nth-child选择器用法实例 jQuery中:last-child选择器用法实例 jQuery中:only-child选择器用法实例 jQuery中:input选择器用法实例 jQuery中:text选择器用法实例 jQuery中:password选择器用法实例 jQuery中:radio选择器用法实例 jQuery中:checkbox选择器用法实例 jQuery中:submit选择器用法实例 jQuery中:image选择器用法实例 jQuery中:reset选择器用法实例 jQuery中:button选择器用法实例 jQuery中:file选择器用法实例 jQuery中:enabled选择器用法实例 jQuery中:disabled选择器用法实例 jQuery中:checked选择器用法实例 jQuery中:selected选择器用法实例 jQuery中attr()方法用法实例 jQuery中removeAttr()方法用法实例 jQuery中prop()方法用法实例 jQuery中removeProp()方法用法实例 jQuery中addClass()方法用法实例 jQuery中removeClass()方法用法实例 jQuery中toggleClass()方法用法实例 jQuery中eq()方法用法实例 jQuery中first()方法用法实例 jQuery中last()方法用法实例 jQuery中hasClass()方法用法实例 jQuery中filter()方法用法实例 jQuery中is()方法用法实例 jQuery中map()方法用法实例 jQuery中has()方法用法实例 jQuery中not()方法用法实例 jQuery中slice()方法用法实例 jQuery中children()方法用法实例 jQuery中closest()函数用法实例 jQuery中find()方法用法实例 jQuery中next()方法用法实例 jQuery中nextAll()方法用法实例 jQuery中nextUntil()方法用法实例 jQuery中parent()方法用法实例 jQuery中parents()方法用法实例 jQuery中parentsUntil()方法用法实例 jQuery中prev()方法用法实例 jQuery中prevAll()方法用法实例 jQuery中prevUntil()方法用法实例 jQuery中siblings()方法用法实例 jQuery中add()方法用法实例 jQuery中andSelf()方法用法实例 jQuery中contents()方法用法实例 jQuery中end()方法用法实例 jQuery中append()方法用法实例 jQuery中appendTo()方法用法实例 jQuery中prependTo()方法用法实例 jQuery中insertAfter()方法用法实例 jQuery中insertBefore()方法用法实例 jquery中one()方法的用法实例 jquery事件preventDefault()方法用法实例 jQuery中unwrap()方法用法实例 jQuery中wrapAll()方法用法实例 jQuery中wrapInner()方法用法实例 jQuery中replaceAll()方法用法实例 jQuery中empty()方法用法实例 jQuery中clone()方法用法实例 jQuery中offset()方法用法实例 jQuery中position()方法用法实例 jQuery中scrollTop()方法用法实例 jQuery中scrollLeft()方法用法实例 jQuery中innerHeight()方法用法实例 jQuery中innerWidth()方法用法实例 jQuery中outerHeight()方法用法实例 jQuery中outerWidth()方法用法实例 jQuery中offsetParent()方法用法实例 jQuery中ready事件用法实例 jQuery中on()方法用法实例 jQuery中bind()方法用法实例 jQuery的one()方法用法实例 jQuery中trigger()方法用法实例 jQuery中triggerHandler()方法用法实例 jQuery中unbind()方法用法实例 jQuery中live()方法用法实例 jQuery中die()方法用法实例 jQuery中delegate()方法用法实例 Jquery中find与each方法用法实例 jquery中change()用法实例分析 jquery中filter方法用法实例分析 JQuery中serialize()用法实例分析 jQuery中noConflict()用法实例分析 JQuery中extend的用法实例分析 jQuery中$.extend()用法实例

发布于 2016-10-27 05:58:17 | 141 次阅读 | 评论: 0 | 来源: 网友投递

这篇文章主要介绍了JQuery中serialize()用法,实例分析了serialize()方法的功能、定义及相关使用技巧,需要的朋友可以参考下

本文实例讲述了JQuery中serialize()用法。分享给大家供大家参考。具体分析如下:

一、serialize()定义和用法:

serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
 
语法:

$(selector).serialize()
 
详细说明

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

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

3、只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
 
4、form里面的name不能够用 Js、jquery里的关键字。
例如:length

<form id="form1">

   <input name="length" type="text" value="pipi" />

   <input name="blog" type="text" value="blue submarine" />

</form>

//使用:$("#form1").serialize();

上面则获取不到值。
 
二、JQuery中serialize()实例
 
1、ajax serialize()

$.ajax({

    type: "POST",

    dataType: "json",

    url:ajaxCallBack,

    data:$('#myForm').serialize(),// 要提交表单的ID

    success: function(msg){

        alert(msg);

    }

});

2、serialize() 序列化表单实例

<script src="jquery-1.7.min。js"></script>

<script>

$(function(){

   $("#submit").click(function(){

     alert($("#myForm").serialize());

   });

});

</script>

<form id="myForm">

昵称 <input type="text" name="username" value="admin" /><br />

密码 <input type="password" name="password" value="admin123" /><br />

<input type="button" id="submit" value="序列化表单" /> 

</form>

点击按钮之后弹出:

username=admin&password=admin123
 
三、serialize是用param方法对serializeArray的一个简单包装
 
1、$.param()

$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。
 
param方法的js代码

param: function( a ) {

///    <summary>

///        This method is internal.  Use serialize() instead.

///    </summary>

///    <param name="a" type="Map">A map of key/value pairs to serialize into a string.</param>'

///    <returns type="String" />

///    <private />

var s = [ ];

function add( key, value ){
    s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value);
};

// If an array was passed in, assume that it is an array
// of form elements
if ( jQuery.isArray(a) || a.jquery )
    // Serialize the form elements
    jQuery.each( a, function(){
 add( this.name, this.value );
    });

// Otherwise, assume that it's an object of key/value pairs
else
    // Serialize the key/values
    for ( var j in a )
 // If the value is an array then the key names need to be repeated
 if ( jQuery.isArray(a[j]) )
     jQuery.each( a[j], function(){
  add( j, this );
     });
 else
     add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );

// Return the resulting serialization
return s.join("&").replace(/%20/g, "+");
}

例如:

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k);    //输出a=1&b=2&c=3

 
2、serializeArray
 
serializeArray方法是将一个表单当中的各个字段序列化成一个数组
serializeArray方法的jquery定义
serializeArray: function() {

///    <summary>

///        Serializes all forms and form elements but returns a JSON data structure.

///    </summary>

///    <returns type="String">A JSON data structure representing the serialized items.</returns>

return this.map(function(){
    return this.elements ? jQuery.makeArray(this.elements) : this;
})
.filter(function(){
    return this.name && !this.disabled &&
 (this.checked || /select|textarea/i.test(this.nodeName) ||
     /text|hidden|password|search/i.test(this.type));
})
.map(function(i, elem){
    var val = jQuery(this).val();
    return val == null ? null :
 jQuery.isArray(val) ?
     jQuery.map( val, function(val, i){
  return {name: elem.name, value: val};
     }) :
     {name: elem.name, value: val};
    }).get();
}

serializeArray数据例子:

[ { 

 name : username, 

 value : 中国 

 }, { 

 name : password, 

 value : xxx 

}]

希望本文所述对大家的jQuery程序设计有所帮助。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务