向序列化的表单数据添加额外的数组

Question

我想做一个 ajax jquery 帖子。我已经序列化了表单数据，但我的端点需要将其他值添加到要一起发布的序列化表单数据中。

要追加到序列化表单数据的对象是

"bridgeConfigurations": [
    {
        "configName":"Provider_Account_Id",
        "configValue":"xxxxx"
    },
    {
    "configName":"Provider_Auth_Token",
    "configValue":"xxxxx"
    }
]

关于如何实现这一点的任何帮助

Answer 1

我推荐的一个有用的 API 是 FormData API

// Your object
const cfg = {
  "bridgeConfigurations": [{
      "configName": "Provider_Account_Id",
      "configValue": "xxxxx"
    },
    {
      "configName": "Provider_Auth_Token",
      "configValue": "xxxxx"
    }
  ]
};

$("#cfgForm").on("submit", function(ev) {
  ev.preventDefault(); // Prevent browser follow form-Action

  // Init FormData for form and its current fields values
  const FD = new FormData(this); // `this` is the cfgForm

  // Add bridgeConfigurations stuff to formData
  cfg.bridgeConfigurations.forEach(item => {
    FD.append("configName[]", item.configName);
    FD.append("configValue[]", item.configValue);
  });

  // Send the FormData
  $.ajax({
    url: "example.php",
    type: "POST",
    processData: false, // https://api.jquery.com/jquery.ajax/
    data: FD, // pass the formData 
  }).done(function(response) {
    console.log(response);
  });

});

Answer 2

你可以这样组合，我不确定你的确切期望是什么。我添加了 3 个示例：

var $form = $('form');
var data = {
  "bridgeConfigurations": [
    {
      "configName":"Provider_Account_Id",
      "configValue":"xxxxx"
    },
    {
      "configName":"Provider_Auth_Token",
      "configValue":"xxxxx"
    }
  ]
};

// EXAMPLE 1
let formData = $($form).serializeArray();
let mergeData = $.merge(formData, data["bridgeConfigurations"]);
let finalData = JSON.stringify(mergeData);
console.log("Example 1: ", finalData);

// EXAMPLE 2
let formData1 = $($form).serializeArray();
let mergeData1 = $.merge(formData1, [data]);
let finalData1 = JSON.stringify(mergeData1);
console.log("Example 2: ", finalData1);

// EXAMPLE 3
let formData2 = $($form).serializeArray();
let formDatas2 = {};
formData2.forEach((value) => { formDatas2[value['name']] = value['value']; });
let mergeData2 = $.extend({}, formDatas2, data);
let finalData2 = JSON.stringify(mergeData2);
console.log("Example 3: ", finalData2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="name" value="demoName">
  <input type="email" name="email" value="dummy@mail.com">
</form>

希望对您有所帮助。