【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的属性值,要与后端接口文档参数名要求的一致
相关推荐
芬兰y4 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁11 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry11 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录12 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟13 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan17 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson22 分钟前
青苔漫染待客迟
前端·设计模式·架构
vvilkim24 分钟前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路43 分钟前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript