序列化表单

2018-09-29 11:12 更新

1.serialize() 定义和用法: -= serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法:

$(selector).serialize()

例如:

var data=$('form').serialize() ;//序列化成URL字符串` var strUrl = decodeURIComponent(data,true)//数据解码

输出结果:

apple=苹果&banana=香蕉&pineapple=菠萝&orange=橘子

2.serializeArray() 定义和用法: -= serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

语法:

$(selector).serializeArray()

例如:

$('form').serializeArray() ;//序列化成json数组 输出结果:

[{"name":"apple","value":"苹果"},{"name":"banana","value":"香蕉"},{"name":"pineapple","value":"菠萝"},{"name":"orange","value":"橘子"}]

3.应用事例 -= <html> <head> <script type="text/javascript" src="/jquery/jquery.js"> </head> <body> <form> 苹果:<input type = 'text' name='apple' value = '苹果'></input><br/> 香蕉:<input type = 'text' name='banana' value = '香蕉'></input><br/> 菠萝:<input type = 'text' name='pineapple' value = '菠萝'></input><br/> 橘子:<input type = 'text' name='orange' value = '橘子'></input><br/> </form>

<button>序列化表单值</button> <div> 序列化成字符串:<span class ='span1' ></span ><br/> 序列化成json数组:<div class ='span2' ></div ><br/> 转换json数组数据:<div class ='span3' ></div ><br/> </div> </script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var data=$('form').serialize() ;//序列化成字符串 var strUrl = decodeURIComponent(data,true) var arry=$('form').serializeArray() ;//序列化成json数组 var arry = JSON.stringify(arry); var json ={}; $.each($('form').serializeArray(),function(index){ json[this['name'] ]=this['value']; }) $(".span1").text(strUrl ); $(".span2").text(arry); $(".span3").text(arry); }); }); </script> </body> </html> 结果:

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号