连接Ajax序列化的数据

Question

我有一个带有输入字段的表单，用户可以在其中引入数据。我使用Ajax发送它，我希望每个字段都向concat.发送一个值。所以如果用户引入测试。可见的结果应该为CCD_ 2。这是我的代码：

<form>
<input type="text" id="test" name="test">
</form>

Ajax

$(document).ready(function() {
if ($("#formid").length) {
$("#formid").submit(function(event) {
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
//success...

当我doo...data: form.serialize() + '&test=' + testtest,时，它只会给id test添加另一个值。我该怎么做concat？

Answer 1

如果您确定您的用户拥有现代浏览器，您可以使用FormData API修改内容，然后使用URLSearchParams API对其进行序列化，例如：

let formData = new FormData(document.getElementById('formid'));
for (let key of formData.keys()) {
formData.set(key, 'http://' + formData.get(key))
}
var url = form.attr('action');
$.ajax({
type: "POST",
url: url, 
data: new URLSearchParams(formData).toString()
}); 

编辑：匹配密钥列表但不是所有密钥的示例：

let formData = new FormData(document.getElementById('formid'));
let specialKeys = ['specialKey1', 'specialKey2'];
for (let key of formData.keys()) {
if(specialKeys.includes(key)) formData.set(key, 'http://' + formData.get(key))
}
var url = form.attr('action');
$.ajax({
type: "POST",
url: url, 
data: new URLSearchParams(formData).toString()
}); 

编辑：为了处理表单中重复键的情况，我们不能明确使用.get和.set方法，而是应该将数据附加到新的表单数据中，例如：

let formData = new FormData(document.getElementById('formid'));
let specialKeys = ['specialKey1', 'specialKey2'];
let modifiedFormData = new FormData(); 
for (let [key, value] of formData.entries()) {
if(specialKeys.includes(key)) {
modifiedFormData.append( key, 'http://'+ value )
}else{
modifiedFormData.append( key, value )
}
}
let newDataAsString = new URLSearchParams(modifiedFormData).toString();
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: newDataAsString,
});