如何获取表单整体的参数名和值

原创已于 2022-11-29 21:10:30 修改 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #servlet #前端

于 2022-11-22 17:58:03 首次发布

前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍了两种将HTML表单数据序列化并发送到服务器的方法：一是使用form-serialize.js库进行序列化；二是直接利用FormData对象。前者可根据需求生成查询字符串或JSON格式的数据，后者则适用于文件上传等场景。

第一种：

1、先引入 form-serialize.js 的文件

2、使用 serialize 方法传入form标签

（1）serialize( 获取的form元素 )

返回值是查询字符串的格式。例如：'username=admin&password=123456'

查询字符串在请求头中对应的Content-Type是 application/x-www-form-urlencoded 格式

（2）serialize( 获取的form元素, { hash: true } )

返回值是 json 格式。例如：{ username: 'admin', password: '123456' }

JSON对象在请求头中对应的Content-Type是 application/json 格式

const form = document.querySelector('form')
            // let formobj = serialize(form)
            let formobj = serialize(form, { hash: true })
            axios({
                url: 'http://ajax-api.itheima.net/api/data',
                method: 'POST',
                data: formobj
            }).then(res => {
                console.log(res)
            }).catch(error => {
                alert('登录失败')
            })

第二种：

通过创建FormData对象

const fd = new FormData( )

返回值是 FormData对象格式

FormData对象在请求头中对应的Content-Type是 multipart/form-data 格式

const form = document.querySelector('form')
            let fd = new FormData()
            let username = document.querySelector('.username').value.trim()
            let password = document.querySelector('.password').value.trim()
            fd.append('username', username)
            fd.append('password', password)
            axios({
                url: 'http://ajax-api.itheima.net/api/data',
                method: 'POST',
                data: fd
            }).then(res => {
                console.log(res)
            })