JS獲取form表單數據詳解

一、js獲取form表單數據轉json

在前端開發中，我們經常需要獲取form表單數據，然後將其轉化為json格式，方便傳給後端處理。下面是一種常見的方法：

function formToJson(form) {
  var data = {};
  for (var i = 0, len = form.elements.length; i < len; ++i) {
    var element = form.elements[i];
    if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'select') {
      data[element.name] = element.value;
    }
  }
  return data;
}

// 使用方法
var form = document.getElementById('myForm');
var formData = formToJson(form);
var jsonData = JSON.stringify(formData);

上述代碼中，我們遍歷了表單的所有元素，如果是input或select元素，則將其name和value存入data對象中。最後，我們將data對象轉換為json格式的字符串。這種方法的缺點是無法處理多選框和單選框，需要單獨處理。

二、js獲取form表單數據並顯示

將表單數據顯示在HTML頁面上也是前端開發中的常見需求，下面是一種方法：

function showFormData(form) {
  var data = '';
  for (var i = 0, len = form.elements.length; i < len; ++i) {
    var element = form.elements[i];
    if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'select') {
      data += element.name + ': ' + element.value + '\n';
    }
  }
  alert(data);
}

// 使用方法
var form = document.getElementById('myForm');
showFormData(form);

上述代碼中，我們同樣遍歷表單的所有元素，如果是input或select元素，則將其name和value拼接為一個字符串，最後通過alert將其顯示出來。

三、js獲取form表單數據格式化

有時候，我們需要對錶單數據做特殊的格式處理，下面是一種方法：

function formatFormData(form) {
  var data = {};
  for (var i = 0, len = form.elements.length; i < len; ++i) {
    var element = form.elements[i];
    if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'select') {
      var value = element.value;
      switch (element.type) {
        case 'checkbox':
          if (element.checked) {
            if (!data[element.name]) {
              data[element.name] = [];
            }
            data[element.name].push(value);
          }
          break;
        case 'radio':
          if (element.checked) {
            data[element.name] = value;
          }
          break;
        default:
          data[element.name] = value;
      }
    }
  }
  return data;
}

// 使用方法
var form = document.getElementById('myForm');
var formData = formatFormData(form);
console.log(formData);

上述代碼中，我們同樣遍歷表單的所有元素，對於多選框和單選框需要單獨處理。對於多選框，我們使用數組來存儲選中的值；對於單選框，我們直接將其值存入data對象中。最後返回一個處理後的data對象。

四、js獲取form表單數據生成json

將表單數據轉換為json格式是前端開發中常見的需求，下面是一種方法：

function formToJson(form) {
  var data = {};
  for (var i = 0, len = form.elements.length; i < len; ++i) {
    var element = form.elements[i];
    if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'select') {
      var value = element.value;
      switch (element.type) {
        case 'checkbox':
          if (element.checked) {
            if (!data[element.name]) {
              data[element.name] = [];
            }
            data[element.name].push(value);
          }
          break;
        case 'radio':
          if (element.checked) {
            data[element.name] = value;
          }
          break;
        default:
          data[element.name] = value;
      }
    }
  }
  return JSON.stringify(data);
}

// 使用方法
var form = document.getElementById('myForm');
var jsonData = formToJson(form);
console.log(jsonData);

上述代碼中，我們同樣遍歷表單的所有元素，對於多選框和單選框需要單獨處理。最後，我們將data對象轉換為json格式的字符串。

五、後端獲取form表單數據

在後端開發中，我們需要獲取前端提交的表單數據，下面是一個PHP代碼示例：

$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];

上述代碼中，我們通過$_POST數組獲取了表單中name、email、password三個字段的值。

六、js獲取表單數據的方式

在前端開發中，獲取表單數據有多種方式，下面是一些常見的方式：

1. 使用jQuery：

var formData = $('form').serializeArray();
console.log(formData);

2. 使用FormData對象：

var form = document.getElementById('myForm');
var formData = new FormData(form);
console.log(formData);

3. 使用jQuery和FormData：

var formData = new FormData($('form')[0]);
console.log(formData);

需要注意的是，使用FormData對象提交表單時，需要將表單的enctype屬性設置為multipart/form-data。

七、js獲取form表單提交的數據

在前端開發中，我們可以通過監聽表單的submit事件，獲取表單的提交數據：

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表單的默認提交行為
  var formData = formToJson(form);
  console.log(formData);
});

上述代碼中，我們通過addEventListener方法監聽表單的submit事件，當表單被提交時，需要阻止表單的默認提交行為。然後，獲取表單數據並輸出到控制台。

八、原生js獲取表單數據

下面是一種原生js獲取表單數據的方式：

var form = document.getElementById('myForm');
var formData = {};
for (var i = 0, len = form.elements.length; i < len; ++i) {
  var element = form.elements[i];
  if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'select') {
    var value = element.value;
    switch (element.type) {
      case 'checkbox':
        if (element.checked) {
          if (!formData[element.name]) {
            formData[element.name] = [];
          }
          formData[element.name].push(value);
        }
        break;
      case 'radio':
        if (element.checked) {
          formData[element.name] = value;
        }
        break;
      default:
        formData[element.name] = value;
    }
  }
}
console.log(formData);

上述代碼中，我們同樣遍歷表單的所有元素，對於多選框和單選框需要單獨處理。最後輸出處理後的formData對象。

九、form表單的值怎麼獲取

表單的值可以通過表單元素的value屬性來獲取，如下代碼所示：

var input = document.getElementById('myInput');
var value = input.value;
console.log(value);

上述代碼中，我們獲取id為myInput的input元素的值，並輸出到控制台。

總結

在前端開發中，獲取form表單數據是常見的需求，我們可以使用多種方式來實現這個目標。需要根據實際情況選擇最合適的方法，並注意處理表單元素的類型。