Question

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

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

但是，由于与此表单相关联的input元素很多，因此我很犹豫使用这种特殊方法，因为将数据提交给API似乎是一种非常麻烦且and回的方式。

不幸的是，在这种特殊情况下，我无法使用通常的<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('&');

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

1 个答案: