【ajax基础04】form-serialize插件

目录

一:form-serialize插件

作用:

语法格式:

一:form-serialize插件

作用:

快速且大量的收集表单元素的值

例如上图对于多表单元素的情形,单靠通过"选择器获取节点.value"值的形式,获取表单元素的值。在操作上、代码量上,非常的不简洁、且麻烦。form-serialize插件就很好的解决了这个问题

语法格式:

javascript 复制代码
const form = document.querySelector('...要获取的表单元素')
serialize(form,{hash:true,empty:true})
//hash 设置获取数据结构
// true:获取的数据为JS对象,一般请求体里提交给服务器
//false:获取的数据为查询字符串


//empty 设置是否获取空值
//true:获取空值,可以保证数据结构和标签结构一致
//false:不获取空值
javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13.form-serialize插件使用</title>
</head>

<body>
    <form action="javascript:;" class="example-form">
        <input type="text" name="uname">
        <br>
        <input type="text" name="pwd">
        <br>
        <input type="button" class="btn" value="提交">
    </form>
    <!-- 
    目标:在点击提交时,使用form-serialize插件,快速收集表单元素值
  -->
    <!-- 1 将插件引入网页 -->
    <script src="./form-serialize.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click', () => {
            // 2 使用serialize函数,快速收集表单元素的值
            const form = document.querySelector('.example-form')
            const data = serialize(form, { hash: true, empty: true })
            console.log(data);
        })
    </script>
</body>

</html>

注意:

  1. html表单元素中设置name属性的属性值,会作为serialize函数收集数据后,返回对象中的属性名
  2. html表单元素中name的属性值,要与后端接口文档参数名要求的一致
相关推荐
excel6 分钟前
JavaScript 中 WeakMap、WeakSet、Set、Map、Object、Array 的区别与应用场景
前端
haaaaaaarry43 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.2 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows