JS獲取Form表單提交的數據

在編寫前端頁面時，我們經常需要獲取表單數據並進行處理，而在JS中實現獲取表單數據的方法有很多。在本文中，我們將從多個方面詳細闡述如何使用JS獲取Form表單提交的數據。

一、JS獲取Form表單數據

在JS中，可以使用form對象中的elements屬性獲取表單元素，然後通過遍歷該元素獲取各個表單項的值。以下是一個簡單的示例代碼：

let form = document.querySelector('form');
let elements = form.elements;
let result = {};
for (let i = 0; i < elements.length; i++) {
  let item = elements.item(i);
  result[item.name] = item.value;
}
console.log(result);

在上述代碼中，我們首先通過querySelector獲取到了表單元素，並從中獲取了所有的表單項。隨後，我們取出每一個表單項，並將其name屬性和value屬性保存到result對象中。

二、JS獲取Form表單中的值

我們可以通過表單項的name屬性獲取對應的值，示例代碼如下：

let form = document.querySelector('form');
let value1 = form.elements['input1'].value;
let value2 = form.elements['input2'].value;
console.log(value1, value2);

上述代碼中，我們通過表單項的name屬性獲取了對應的值，並將其保存到value1和value2中，最後將其打印到控制台上。

三、JS阻止Form表單提交

我們可以通過JS阻止表單的默認提交行為，以便在提交前對錶單數據進行處理、判斷或修改。示例代碼如下：

let form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表單默認提交行為
  // 在此處進行表單數據的處理或判斷
});

在上述代碼中，我們使用addEventListener監聽了表單的submit事件，當表單被提交時會觸發該事件，從而調用事件處理函數。在此函數中，我們調用preventDefault方法阻止了表單的默認提交行為，以便在函數內對錶單數據進行處理或判斷。

四、獲取Form表單數據

我們通過序列化表單數據的方式獲取所有表單項的值，並將其保存為一個字符串。示例代碼如下：

let form = document.querySelector('form');
let formData = new FormData(form);
let data = {};
for (let entry of formData.entries()) {
  data[entry[0]] = entry[1];
}
console.log(data);

在上述代碼中，我們首先使用FormData對象獲取了表單中所有表單項的值，並將其保存到formdata中。接着，我們使用entries方法將表單項的值逐一取出，並按照{ name: value }的格式保存到data對象中。

五、獲取表單Form提交的參數

我們可以通過URLSearchParams對象獲取表單提交的參數。示例代碼如下：

let form = document.querySelector('form');
let params = new URLSearchParams(new FormData(form));
console.log(params.toString());

在上述代碼中，我們首先使用FormData對象獲取了表單中所有的表單項值，然後使用URLSearchParams對象將表單項及其值轉換為參數字符串形式，並通過toString()方法將其打印到控制台上。

六、JS提交Form表單action

我們可以通過JS提交表單數據並跳轉到對應的URL頁面。示例代碼如下：

let form = document.querySelector('form');
form.submit(); // 提交表單並跳轉到對應的URL頁面

在上述代碼中，我們使用了submit()方法提交表單數據並跳轉到對應的URL頁面。如果需要在提交前對錶單數據進行處理或判斷，我們可以使用addEventListener監聽submit事件，並在事件處理函數中進行相應的處理。

七、JS提交Form表單的AJAX

我們可以使用AJAX方式向後端提交表單數據，以實現異步數據提交和響應。示例代碼如下：

let form = document.querySelector('form');
let xhr = new XMLHttpRequest();
xhr.open('POST', form.action);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
let data = new FormData(form);
xhr.send(new URLSearchParams(data));

在上述代碼中，我們首先創建了一個XMLHttpRequest對象xhr，並使用open()方法指定了請求的方式、URL和異步參數，然後使用setRequestHeader()方法設置了請求頭信息，並使用send()方法發送表單數據。最後，在onreadystatechange事件中處理異步請求的響應。

八、原生JS用AJAX提交Form表單

我們也可以使用原生JS封裝AJAX方法，以方便使用和調用。示例代碼如下：

function ajax(options) {
  let xhr = new XMLHttpRequest();
  xhr.open(options.type || 'POST', options.url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        options.success && options.success(xhr.responseText, xhr);
      } else {
        options.error && options.error(xhr.statusText, xhr);
      }
      options.complete && options.complete(xhr.responseText, xhr);
    }
  }
  xhr.timeout = options.timeout || 0;
  xhr.ontimeout = function() {
    options.timeout && options.timeout(xhr);
  }
  xhr.onerror = function() {
    options.error && options.error(xhr.statusText, xhr);
  }
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  let data = new FormData(options.form);
  xhr.send(new URLSearchParams(data));
}

let form = document.querySelector('form');
ajax({
  form: form,
  url: form.action,
  success: function(response, xhr) {
    console.log(response);
  },
  error: function(statusText, xhr) {
    console.error(statusText);
  }
});

在上述代碼中，我們封裝了一個ajax函數，並使用XMLHttpRequest對象封裝了異步請求方法。在請求執行時，我們監聽了XMLHttpRequest對象的readyState、status、timeout和error事件，並在相應的事件處理函數中執行相應的操作。

九、JS表單獲取提交的數據

在Python Flask中，我們可以使用form屬性獲取表單提交的數據。示例代碼如下：

from flask import request
@app.route('/submit_form', methods=['POST'])
def submit_form():
    username = request.form.get('username')
    password = request.form.get('password')
    return 'Username: {}, Password: {}'.format(username, password)

在上述代碼中，我們使用request對象的form屬性獲取表單提交的數據，並根據需要進行處理、判斷或重定向操作。

十、Flask提交表單用Form好還是JS好

在Python Flask中，我們可以使用Flask-Form和WTForms庫來實現後端表單驗證功能。對於表單驗證功能比較簡單的項目，我們可以使用JS來實現前端表單驗證，並在提交時進行驗證和提示。對於表單驗證功能較為複雜的項目，則需要採用Flask-Form或WTForms庫來實現後端表單驗證。

綜上所述，我們可以根據實際需求和項目複雜度來選擇採用JS還是Flask-Form或WTForms庫來實現表單數據的提交和驗證。

結語

本文從多個方面詳細闡述了如何使用JS獲取Form表單提交的數據，包括獲取表單數據、獲取表單項的值、阻止表單提交、獲取表單數據、獲取表單提交的參數、提交表單action、提交表單的AJAX、原生JS用AJAX提交表單以及Flask提交表單用Form好還是JS好選取等內容。希望對讀者了解JS和表單數據提交有所幫助。