表单提交类型

Posted 2023-01-24 前端精髓

普通表单提交

html <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

关于提交表单的属性

1. action，处理表单提交的 URL
2. enctype，当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的值有：application/x-www-form-urlencoded，multipart/form-data。
3. method，浏览器使用这种 HTTP 方式来提交表单。可能的值有：post，get。

1、通过表单控件

<form action="/upload" method="post">
  <label for="username">用户名:</label>
  <input type="text" name="username" id="username" />
  <input type="submit" name="submit" value="Submit" />
</form>

表单未指定 enctype 属性时的默认值为 application/x-www-form-urlencoded。

2、不通过表单控件

<label for="username">用户名:</label>
<input type="text" name="username" id="username" />
<input type="submit" name="submit" value="Submit" id="btn" />

const btn = document.getElementById('btn')
btn.onclick = function () 
  axios(
    method: 'post',
    url: '/upload',
    data: 'param1=value1&param2=value2',
    headers: 'Content-Type': 'application/x-www-form-urlencoded' ,
  )

如果不想手动拼接参数’‘param1=value1&param2=value2’'，可以使用URLSearchParams来拼接参数。

<label for="username">用户名:</label>
<input type="text" name="username" id="username" />
<input type="submit" name="submit" value="Submit" id="btn" />

const btn = document.getElementById('btn')
btn.onclick = function () 
  const params = new URLSearchParams();
  params.append('param1', 'value1');
  params.append('param2', 'value2');
  axios(
    method: 'post',
    url: '/upload',
    data: params,
    headers: 'Content-Type': 'application/x-www-form-urlencoded' ,
  )

文件表单提交

1、通过表单控件

<form action="/upload" method="post" enctype="multipart/form-data">
  <label  for="file">文件名:</label>
  <input type="file" name="file" id="file" />
  <input type="submit" name="submit" value="Submit" />
</form>

当表单包含 type=file 的 <input> 元素时需使用 enctype 为 multipart/form-data。

2、不通过表单控件

<label  for="file">文件名:</label>
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />

const btn = document.getElementById('btn')
btn.onchange = function () 
  const params = new FormData();
  params.append('file', this.files[0])
  axios(
    method: 'post',
    url: '/upload',
    data: params,
    headers: 'Content-Type': 'multipart/form-data' ,
  )

axios

默认情况下，axios 将 javascript 对象序列化为 JSON 。以 application/json 格式发送数据给后端。

// 发起一个post请求
axios(
  method: 'post',
  url: '/user/12345',
  data: 
    firstName: 'Fred',
    lastName: 'Flintstone'
  
);

要以 application/x-www-form-urlencoded 格式发送数据，在浏览器中，可以使用URLSearchParams API，或者, 您可以使用 qs 库编码数据:

import qs from 'qs';
const data =  'bar': 123 ;
const options = 
  method: 'POST',
  headers:  'content-type': 'application/x-www-form-urlencoded' ,
  data: qs.stringify(data),
  url,
;
axios(options);

曾经想通过 post 提交方式提交数据，只能是使用 form 表单 submit 的方式来提交，因为过去没有 ajax 的提交方式。如今大家都更愿意使用 ajax 了，那么接口传参时用 formdata 好还是用 json好？

application/x-www-form-urlencoded:

// form data 简单:
name=john&phone=12345
// form data 冗余:
passengers[][name]=Egor&passengers[][role]=pilot&passengers[][name]=DHH&passeng

application/json:

// JSON 冗余:
"name":"john","phone":"12345"
// JSON 简单:
"passengers":["name":"Egor", "role":"pilot","name":"DHH", "role":"2pilot"]

通过上⾯例⼦发现，结构简单的时候 formdata 数据更简单，结构复杂的时候(array)JSON数据更简单。