是否有更简洁的方式将大量输入元素值发布到 API？

Question

我有一个 ASP.NET 项目，目前正在使用 JQuery 和 Bootstrap 创建前端。此前端的一部分涉及用户填写由 30 多个 input 元素组成的表单，然后需要将其提交给后端 API。

通常，如果我需要与 API 通信，我会使用 JQuery 内置的 post() 和 post() 方法，并构造一个查询字符串以在这些方法中使用。

但是，由于有大量的input 元素与此表单相关联，我犹豫是否要使用这种特殊方法，因为将数据提交给 API 似乎是一种非常混乱和迂回的方式。

很遗憾，在这种特殊情况下，我无法使用通常的<input action="action.xx"> 方法，因此无法提交整个表单。

但是我真的不想在下面做这样的事情：

queryString = 
"?input1=" + $("#input1").val() + 
"&input2=" + $("#input2").val() ... //repeat for 30+ input elements

$.post(url + queryString, funtion(data){ ... });

肯定有更好的方法来解决这个特定问题，不涉及创建一个可恶的大字符串并通过 JQuery 的post 方法传递它？

Answer 1

给每个输入一个name 属性，而不是（与查询字符串相同的名称），然后在表单上调用.serialize() 以生成查询字符串：

$('form').on('submit', function(e) {
  e.preventDefault();
  console.log($(this).serialize());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input name="inp1">
<input name="inp2">
<input name="inp3">
<button>submit</button>
</form>

或者，如果你不能这样做，并且你想要一种比你现在使用的更短、更不容易出错的方式来生成字符串，那么迭代一个选择器数组并获取每个选择器的.val()，然后通过&s 加入：

const ids = ['input1', 'input2', 'input3'];
const queryString = ids.map(id => $('#' + id).val()).join('&');