js之表单序列化提交

最新推荐文章于 2024-08-16 08:26:00 发布
最新推荐文章于 2024-08-16 08:26:00 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： javascript jquery 文章标签： jquery 序列化 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36922927/article/details/79601621
版权
jQuery 序列化表单数据 serialize() serializeArray() 


1.serialize()方法
　　格式：var data = $("form").serialize();
　　功能：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用挨着选取出每一个参数。只需将data参数设置为 $("form").serialize() 即可。


2.serializeArray()方法
　　格式：var jsonData = $("form").serializeArray();
　　功能：将页面表单序列化成一个JSON结构的对象。 注意不是JSON字符串。

　　比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name（这是取不出值的）

jsonData[0]可以取出第0个json对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
alert("hello1");
$("[type='button']").click(function(){
var data=$("form").serialize();
var data2=$("form").serializeArray();
alert(data2);
$("#showData").html("data:"+data+"   data2:"+data2+"<br>"+"data2 sex:"+data2[0])
//通过each方法遍历
 $.each(data2, function(i, field){
$("#showData").append(field.name + ":" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr><td>年龄<input type="text" name="age"></td></tr>
<tr><td>性别 <input type="text" name="sex"></td></tr>
</table>
</form>
<input type="button" value="test"><br>
数据显示：<p id="showData"></p>
</body>
</html>


大卫不加班
关注
专栏目录
原生js实现form表单序列化的方法
10-18
主要介绍了原生js实现form表单序列化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js中表单数据序列化方式
weixin_34104341的博客
06-09 457
一共有以下三种： var obj1 = $('#queryForm').serialize(); var obj2 = $('#queryForm').serializeArray(); var obj3 = $('#queryForm').serializeObject();var obj4 = JSON.stringify(obj3); //通过3转化为json字符串 分别...
推荐使用：form-serialize - 简化表单序列化的JavaScript库
最新发布
gitblog_00645的博客
08-16 342
推荐使用：form-serialize - 简化表单序列化的JavaScript库 form-serializeserialize html forms项目地址:https://gitcode.com/gh_mirrors/fo/form-serialize 在Web开发中，处理表单数据的提交和序列化常常是一项繁琐的任务。form-serialize 是一个轻量级的JavaScript库，能将H...
表单序列化提交
weixin_30357231的博客
04-29 77
1、serialize()方法 描述：序列化表单内容为字符串,用于Ajax请求。 格式：var data = $(form).serialize(); 2.serializeArray()方法 描述：序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。 注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。 ...
序列化表单
求人不如求己
10-19 379
//序列化表单 $.fn.extend({ serializeObject : function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (...
序列化提交表单serialize
weixin_45297837的博客
12-23 217
jQuery ajax()使用serialize()提交form数据 1、$("#form1").serialize() 把form表单的值序列化成一个字符串，如username=admin&password=admin123 <form id="form1"> <input name="username" type="text" value="" /> ...
JS中from 表单序列化提交的代码
11-27
废话不多说了，直接给大家贴代码了，具体代码如下所示： // ----ajax begin $.ajax({ type: "POST", url: "../compRule/updateRuleById?tids="+compTableName_val+"&isReportName="+$('#isReport_update').val()+...
Javascript表单序列化原理及实现代码详解
01-18
随着 Ajax 的出现，表单序列化已经成为一种常见需求。在 JavaScript 中，可 以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前， 有必须先搞清楚在表单提交期间，浏览器...
js表单序列化判断空值的实例
10-19
总结来说，通过使用JavaScript进行表单序列化，并结合对序列化结果的遍历判断，可以有效地对用户提交的表单数据进行完整性检查，确保数据的有效性和一致性，避免无效数据进入数据库，从而提高Web应用程序的数据处理...
jQuery中验证表单提交方式及序列化表单内容的实现
12-02
在jQuery中，表单提交和验证是...同时，`serializeArray()`方法提供了一种灵活的方式，便于处理和操作序列化的表单数据。在实际开发中，根据项目的特性和需求，合理选择和组合这些方法可以提高代码的效率和用户体验。
js表单序列化
diandiwang的博客
10-02 414
function serialize(form){ var parts=[], field=null, i,len,j,optLen,option,optValue; for(i=0,len=form.elements.length;i<len;i++){ field=form.elements[i]; switch(field.type){ case :'select-
将表单序列化为json对象
10-14
将众多表单属性序列化为json对象，大大简化了代码量。
用Javascript将form所有内容序列化和反序列化的例子。
04-10
NULL 博文链接：https://goro.iteye.com/blog/1671322
jq表单序列化提交
qq_39040192的博客
04-30 650
@jq表单序列化提交 jq表单序列化提交serialize(); var original = $(".original_bs_look").serialize(); 表单序列化提交， 注意：在DOM的input中不要写disabled，否则无法选取 ...
java关于form表单的序列化提交（包括带有file）
手持代码的侠客博客
01-05 2756
1.普通 form表单序列化提交 1）： var o = {}; var a = $('#form').serializeArray();//序列化为array alert(a);//转json格式 alert(JSON.stringify(a));//转json格式 //将序列化陈的array 然后转化为 ajax格式的json 数据
JavaScript--表单的序列化
monster1935的专栏
05-20 520
一、关于表单序列化在浏览器中使用Ajax向服务器提交表单的时候会对表单进行一个序列化的过程，也就是按照一定规则，利用表单字段的type属性，将name和value属性拼接成字符串发送给服务器。二、表单提交的规则 对表单字段的名称和值进行URL编码，使用和号（&）分隔 对于禁用的表单字段默认执行不发送 对于复选框和单选按钮只发送选中的部分 不发送type为“reset”和“button”的按钮 < s
原生JavaScript实现form表单序列化的方法
明月如霜丶
12-31 1201
当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法： 先介绍一下jquery中有相应的表单序列化的方法： 1.serialize()方法 格式：var data = $(“form”).serialize(); 功能：将表单内容序列化成一个字...
js serialize() 方法，对表单进行序列化操作
qq_44858403的博客
11-10 6307
1.serialize()方法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 语法： $("#id").serialize(); 例子： 表单 <form class="login-form" id="adminInfo" novalidate > <!--输入框-->
JS serialize() 方法，对表单进行序列化操作
qq_46104221的博客
02-17 1022
通过使用这个方法，表单的数据会已aminName=11&adminPassword=aajson格式进行传递。这样在控制层获取是可以直接Admin admin,得到全部的信息，十分方便。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值