jQuery 获取所有输入名称和值并提交 - Javascript

在前端开发中，我们经常需要获取所有输入框的名称和值，用于提交表单数据或进行其他操作。jQuery 是一个非常流行的 JavaScript 库，可帮助我们轻松地实现此功能。

1. 获取所有输入框的名称和值

可以使用 jQuery 的 serializeArray() 方法获取表单中所有输入框的名称和值。该方法返回一个数组，每个数组元素都是一个对象，包含输入框的名称和值。

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

上面的代码将表单中所有输入框的名称和值存储在 formData 变量中，并将其打印到控制台中。

如果您只想获取特定表单字段的数据，则可以在表单选择器中指定字段名称或使用 jQuery 的 find() 方法来选择它们。

var formData = $('form input[name="username"], form input[name="password"]').serializeArray();
console.log(formData);

上面的代码只获取表单中名为 username 和 password 的输入框的数据。

2. 将数据提交到服务器

获取表单数据后，您可以使用 jQuery 的 ajax() 方法将其提交到服务器。

$.ajax({
  url: 'submit.php',
  type: 'post',
  data: formData,
  success: function(response) {
    console.log(response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus + ': ' + errorThrown);
  }
});

上面的代码向 submit.php 发送 POST 请求，并将表单数据作为数据参数传递。如果请求成功，服务器将返回响应，并在控制台中打印它。如果发生错误，则将错误消息打印到控制台中。

结论

使用 jQuery 可以轻松地获取表单中所有输入框的名称和值，并将其提交到服务器。这可以帮助您快速构建强大的 Web 应用程序。