JS获取form表单数据详解

发布时间：2023-05-17

一、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);
  1. 使用FormData对象：
var form = document.getElementById('myForm');
var formData = new FormData(form);
console.log(formData);
  1. 使用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表单数据是常见的需求，我们可以使用多种方式来实现这个目标。需要根据实际情况选择最合适的方法，并注意处理表单元素的类型。

推荐文章