前端笔记 关于表单常用方法 serialize()和new FormData()的理解

最新推荐文章于 2024-08-16 08:26:00 发布
最新推荐文章于 2024-08-16 08:26:00 发布
阅读量436 收藏
点赞数
文章标签： 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doiido/article/details/134060129
版权

serialize()和FormData对象都可将表单数据序列化，后通过ajax异步提交 ，序列化表单就是将form表单中所有name属性序列化成KEY-VALUE的形式，提交到后台，后台以对象相应的字段接收

serialize()

　　serialize()是JQuery方法，必须依赖jQuery，可序列化表单值创建 URL 编码文本字符串，就是将表单数据以字符串的形式返回，在ssm框架中可通过对象直接接收数据。

       缺点：只能序列化一般数据，文件上传(比如上传头像)则无法序列化，不支持文件二进制流提交。

FormData对象

　　FormData是HTML5对象，目前可兼容大多主流的浏览器，但不兼容低版本IE浏览器。

使用FormData 的最大优点就是可以异步上传二进制文件。

　　通过ajax异步提交表单数据，可实现文件上传

注意：

　　1 form表单加 enctype="multipart/form-data"；

　　2 ajax加 processData: false,contentType: false,

　　3 一般数据域通过此方式序列化后，在ssm框架中后台不可以通过对象直接获取数据

doiido
关注
Ajax学习笔记Ajax 编程基础 Ajax 运行原理及实现 Ajax 异步编程 Ajax 封装 FormData 对象的实例方法 同源政策 JSONP 代码优化 CORS 跨域资源共享 cookie
weixin_42199245的博客
06-03 603
Ajax 编程基础 Ajax 运行原理及实现 Ajax 异步编程 Ajax 封装 FormData 对象的实例方法 同源政策 JSONP 代码优化 CORS 跨域资源共享 cookie jQuery 中的 Ajax Ajax全局事件 RESTful 和 XML
前端学习笔记——Ajax
lxy95512的博客
03-10 1343
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 URL地址的组成部分 URL地址一般由三部组成: ①客户端与服务器之间的通信协议 ②存有该资源的服务器名称 ③资源在服务器上具体的存放位置 客户端与服务器的通信过程 客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。 如果要在网页中请
JS serialize() 方法，对表单进行序列化操作
qq_46104221的博客
02-17 1034
通过使用这个方法，表单的数据会已aminName=11&adminPassword=aajson格式进行传递。这样在控制层获取是可以直接Admin admin,得到全部的信息，十分方便。
关于jquery的 $("form").serialize()和 new FormData表单序列化
weixin_30763397的博客
01-03 285
$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别 首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了， new FormData使用需要有一个注意点， 注意点一：，对于j...
推荐使用：form-serialize - 简化表单序列化的JavaScript库
最新发布
gitblog_00645的博客
08-16 346
推荐使用：form-serialize - 简化表单序列化的JavaScript库 form-serializeserialize html forms项目地址:https://gitcode.com/gh_mirrors/fo/form-serialize 在Web开发中，处理表单数据的提交和序列化常常是一项繁琐的任务。form-serialize 是一个轻量级的JavaScript库，能将H...
serialize
weixin_42630900的博客
07-07 1408
serialize() 作用：序列表单内容为字符串。 参数： 无 返回值：表单内容的字符串格式serializeArray()    作用：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。     参数 表单内容的json对象表示 表单元素追加  var dataParam = $("#updateChannelForm")...
【Ajax】- serialize() 和 FormData()的区别
m0_55960697的博客
04-20 1187
serialize() 函数和 FormData() 都能够一次性获取到表单中name属性的数据 1.jQuery 的 serialize() 函数 jQuery 的 serialize() 函数能够一次性获取到表单中name属性的数据，它的语法格式如下： $('表单元素的选择器').serialize(); 注意点：需要先应用 jQuery.js 文件再使用方法 axios({ url: 'http://www.itcbc.com:3006/api/addbook', me..
前端笔记 jQuery serialize() 方法
doiido的专栏
10-25 117
serialize() 方法通过序列化表单值创建 URL 编码文本字符串。您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
前端开发笔记
冯天祥
03-06 6387
aria-expanded=“false” aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的 aria-hidden字符串 可选值为true和false，true表示元素隐藏(不可见)，false表示元素可见 快捷键 Ctrl + Enter 光标不在末尾回车 Ctrl + Bac...
前端--阶段笔记（四）前后端交互
往前看
09-30 1985
第四阶段复习 第一章 ajax + http URL url 统一资源定位符 uniformResourceLocatior 由三部分组成：通信协议 服务器名 服务器上具体存储位置 http://<host>:<port>/<path>?<searchpart> 三个步骤：请求处理响应 浏览器提供的通信过程分析工具： F12 开发者模式 Network，选中Doc标签，在下面的具体页面点击一下，就能看到这个网页的详情。respones里面就是返回过来的内容 X
jquery表单绑定
08-30
`jb51.net.txt`可能是一份教程或笔记，记录了关于jQuery表单绑定的更多信息。`更多脚本.url`可能是链接到其他相关脚本或教程的快捷方式。`css`和`js`目录则可能包含了样式表和jQuery库文件。 通过学习和实践这些...
表单数据序列化之serialize()、serializeArray()方法的使用
昔冰_G的博客
10-01 4784
serialize()可以对表单中的数据进行拼接 可能之前有过这种情况：客户端将表单信息通过获取到表单项的值，再把这些值进行拼接，再将拼接好的字符串发送到服务端；现在可以使用serialize()来对表单信息进行自动拼接，serialize方法的出现使得可以不用获取每个表单项就可以拿到拼接好的字符串。 注意：serialize()方法是对于表单而言的，该方法的调用者应该是某个表单对象 测试serialize()： <body> <form id="form">
前端表单序列化serialize()，传递参数至后端，如何将中文转回中文
weixin_43976226的博客
12-27 936
前言 由于业务需要，把表单序列化后的参数需要赋值给 变量，然后做进一步处理，再传递给后端。再这个过程中，会发现中文字符串不是中文，而是已经被编码过了，这个时候，后端接受的参数也是编码后的字符串，与需求不符合。 解决办法 var formdata= $('#form').serialize(); formdata= decodeURIComponent(formdata,true); //加上这行即可 ...
[关于前端数据] - serialize()的使用
weixin_33910460的博客
02-22 842
虽然是拼接字符串,但是也能通过post方式提交 $("#signUpForm").serialize() 结果 controller照样使用实例接收数据即可 转载于:https://www.cnblogs.com/ukzq/p/10421118.html...
serialize()和new FormData()的区别
weixin_30916125的博客
04-25 277
serialize()和FormData对象都可将表单数据序列化，后通过ajax异步提交 ，序列化表单就是将form表单中所有name属性序列化成KEY-VALUE的形式，提交到后台，后台以对象相应的字段接收 1.serialize() 　　serialize()是JQuery方法，必须依赖jQuery，可序列化表单值创建 URL 编码文本字符串，就是将表单数据以字符串的形式返回，在ssm框架...
jQuery 序列化表单 serialize()和serializeArray()使用方法
dyfc3sfd3s的博客
12-01 541
问题描述： jquery serialize用于将表单内容序列化成一个字符串，serialize经常用在表单AJAX提交过程中。serializeArray方法用于将页面表单序列化成一个JSON结构的对象，注意不是JSON字符串。本文章通过实例向大家讲解jQuery serialize()和serializeArray()使用方法。需要的码农可以参考一下。 问题分析： 1.s
jQuery 表单数据序列化为json格式
热门推荐
11-01 1万+
jQuery是在web应用中使用的脚本语言之一，因其具有轻量级,易学易用等特点，已广泛应用，其中的ajax封装简化了我们的应用，对其表单数据序列化用如下方法： 1.serialize()方法 　　格式：var data = $("form").serialize(); 　　功能：将表单内容序列化成一个字符串。 　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只
Ajax【serialize()和formdata区别】
Coding
04-20 859
Ajax【serialize()和formdata区别】
前端form表单绑定后端方法
05-10
前端表单提交到后端方法，一般需要通过以下步骤来完成： 1. 在前端页面中创建表单元素，并设置表单的 action 属性为后端方法的 URL 地址； ```html <form action="/api/submit" method="post"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">提交</button> </form> ``` 2. 在表单中添加需要提交的参数，例如上述示例中的用户名和密码； 3. 设置表单的 method 属性为 POST 或 GET，根据后端方法的要求选择相应的请求方式； 4. 通过 JavaScript 监听表单的提交事件，防止表单默认的提交行为，并使用 AJAX 发送表单数据到后端方法。以下是一个 jQuery 实现的示例： ```javascript $('form').submit(function (event) { event.preventDefault(); // 阻止表单默认提交行为 var formData = $(this).serialize(); // 将表单数据序列化为字符串 $.ajax({ url: $(this).attr('action'), // 获取表单的 action 属性作为请求 URL type: $(this).attr('method'), // 获取表单的 method 属性作为请求方法 data: formData, // 将表单数据作为请求参数 success: function (response) { // 处理请求成功的响应结果 }, error: function (xhr, status, error) { // 处理请求失败的响应结果 } }); }); ``` 5. 在后端方法中获取表单提交的参数，并进行相应的处理。以下是一个使用 Node.js 和 Express 框架实现的示例： ```javascript const express = require('express'); const app = express(); app.post('/api/submit', function (req, res) { const username = req.body.username; // 获取表单提交的用户名 const password = req.body.password; // 获取表单提交的密码 // TODO: 处理表单提交的数据 res.send('提交成功'); // 返回响应结果 }); app.listen(3000, function () { console.log('服务器已启动'); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值