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>

  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));
  });

二、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>

  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')));
  }

三、form表單提交數據量太大

如果需要提交大量數據，可以使用分塊上傳的方式，將數據按照一定大小進行切分，每次上傳一部分，直到所有數據都被上傳

示例代碼：

<input type="file" id="myFile">

  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 = 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);
  }

四、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>

  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);
  }

八、前端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>

  function validate() {
    const password = document.getElementById('myInput').value;
    const reg = /^[\w!@#$%^&*()_\-+={}\[\]|;:'",.\/?\\]{6,}$/;
    if (!reg.test(password)) {
      alert('密碼必須包含字母、數字、特殊字符，長度至少為6位');
      return false;
    }
    return true;
  }