Form表单提交数据详解

一、从form表单提交数据怎么拿到返回

使用form表单提交数据后，如果需要拿到返回的内容，可以使用JavaScript的XMLHttpRequest对象（简称XHR）

示例代码：

<form id="myForm" action="/example" method="post">
  <label for="myInput">输入内容:</label>
  <input id="myInput" type="text" name="inputContent">
  <button type="submit">提交</button>
</form>
<script type="text/javascript">
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    const xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action);
    xhr.onload = function() {
      if (xhr.status === 200) {
        alert('返回的内容是：' + xhr.responseText);
      }
    };
    xhr.send(new FormData(form));
  });
</script>

二、form表单提交数据不跳转页面

使用Ajax技术，可以在不刷新页面的情况下提交表单并获取返回结果

示例代码：

<form id="myForm" action="/example" method="post">
  <label for="myInput">输入内容:</label>
  <input id="myInput" type="text" name="inputContent">
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script type="text/javascript">
  function submitForm() {
    const xhr = new XMLHttpRequest();
    xhr.open(document.getElementById('myForm').method, document.getElementById('myForm').action);
    xhr.onload = function() {
      if (xhr.status === 200) {
        alert('返回的内容是：' + xhr.responseText);
      }
    };
    xhr.send(new FormData(document.getElementById('myForm')));
  }
</script>

三、form表单提交数据量太大

如果需要提交大量数据，可以使用分块上传的方式，将数据按照一定大小进行切分，每次上传一部分，直到所有数据都被上传

示例代码：

<input type="file" id="myFile">
<script type="text/javascript">
  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  const file = document.getElementById('myFile').files[0];
  const chunkSize = 1024 * 1024; // 每个分块文件大小为1MB
  const chunks = Math.ceil(file.size / chunkSize); // 计算需要分成几块
  const hash = 'abcdefg'; // 使用MD5等算法计算文件的哈希值
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/example', true);
  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize;
    const end = ((i + 1) * chunkSize >= file.size) ? file.size : (i + 1) * chunkSize;
    const chunk = blobSlice.call(file, start, end);
    const formData = new FormData();
    formData.append('chunkData', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', chunks);
    formData.append('hash', hash);
    xhr.send(formData);
  }
</script>

四、form表单提交数据格式

form表单提交数据的格式取决于表单的enctype属性的值，常用的类型有application/x-www-form-urlencoded（默认值）和multipart/form-data（用于上传文件或二进制数据）

示例代码：

<form enctype="multipart/form-data" action="/example">
  <input type="file" name="myFile">
  <button type="submit">上传</button>
</form>

五、form表单提交数据类型

常用的form表单提交数据类型有：text、hidden、password、radio、checkbox、file、select、textarea等

示例代码：

<form action="/example">
  <label for="myInput1">文本框:</label>
  <input id="myInput1" type="text" name="inputData1">
  <label for="myInput2">隐藏域:</label>
  <input id="myInput2" type="hidden" name="inputData2" value="123">
  <label for="myInput3">密码框:</label>
  <input id="myInput3" type="password" name="inputData3">
  <label for="myInput4">单选按钮:</label>
  <input id="myInput4" type="radio" name="inputData4" value="1">选项1
  <input id="myInput4" type="radio" name="inputData4" value="2">选项2
  <label for="myInput5">多选按钮:</label>
  <input id="myInput5" type="checkbox" name="inputData5" value="1">选项1
  <input id="myInput5" type="checkbox" name="inputData5" value="2">选项2
  <label for="myInput6">文件:</label>
  <input id="myInput6" type="file" name="inputData6">
  <label for="myInput7">下拉列表:</label>
  <select id="myInput7" name="inputData7">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
  <label for="myInput8">多行文本框:</label>
  <textarea id="myInput8" name="inputData8"></textarea>
  <button type="submit">提交</button>
</form>

六、form表单提交数据丢失

如果在提交表单的过程中数据丢失，可以先检查表单控件的name属性是否被正确填写，同时要确保表单控件没有被其他JavaScript代码修改

七、form表单提交数据json表示

可以使用JavaScript的JSON对象将表单提交的数据转化为JSON格式的字符串

示例代码：

<form id="myForm" action="/example" method="post">
  <label for="myInput1">输入内容1:</label>
  <input id="myInput1" type="text" name="inputContent1">
  <label for="myInput2">输入内容2:</label>
  <input id="myInput2" type="text" name="inputContent2">
  <button type="button" onclick="toJson()">提交</button>
</form>
<script type="text/javascript">
  function toJson() {
    const inputs = document.querySelectorAll('#myForm input[type="text"]');
    const jsonObj = {};
    inputs.forEach(function(input) {
      jsonObj[input.name] = input.value;
    });
    const jsonStr = JSON.stringify(jsonObj);
    const xhr = new XMLHttpRequest();
    xhr.open(document.getElementById('myForm').method, document.getElementById('myForm').action);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    xhr.onload = function() {
      if (xhr.status === 200) {
        alert('返回的内容是：' + xhr.responseText);
      }
    };
    xhr.send(jsonStr);
  }
</script>

八、前端form表单提交数据

前端可以通过JavaScript处理表单提交的数据（例如验证数据是否正确、格式化数据等），然后再发送给后端，也可以使用Ajax技术在不刷新页面的情况下提交数据

九、post提交form表单数据

如果需要在form表单中使用HTTP的POST方法提交数据，需要将表单的method属性设置为post

示例代码：

<form method="post" action="/example">
  <label for="myInput">输入内容:</label>
  <input id="myInput" type="text" name="inputContent">
  <button type="submit">提交</button>
</form>

十、form表单提交数据验证密码

可以在前端使用JavaScript的正则表达式验证表单控件的数据是否符合要求

示例代码：

<form id="myForm" action="/example" method="post">
  <label for="myInput">密码:</label>
  <input id="myInput" type="password" name="password">
  <button type="submit" onclick="return validate()">提交</button>
</form>
<script type="text/javascript">
  function validate() {
    const password = document.getElementById('myInput').value;
    const reg = /^[\w!@#$%^&*()_\-+={}\[\]|;:'",.<>\/?\\]{6,}$/;
    if (!reg.test(password)) {
      alert('密码必须包含字母、数字、特殊字符，长度至少为6位');
      return false;
    }
    return true;
  }
</script>