连接 Ajax 序列化数据

Question

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

<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...

当我执行 ...data: form.serialize() + '&test=' + testtest, 时，它只会添加另一个值到 id 测试。 我该如何进行连接？

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,
});