向序列化表单数据添加额外的数组
Add additional array to serialized form data
我想做一个ajaxjquerypost。我已经序列化了表单数据,但我的端点需要将额外的值添加到序列化的表单数据中才能 post 编辑在一起。
要附加到序列化表单数据的对象是
"bridgeConfigurations": [
{
"configName":"Provider_Account_Id",
"configValue":"xxxxx"
},
{
"configName":"Provider_Auth_Token",
"configValue":"xxxxx"
}
]
关于如何实现的任何帮助
您可以这样组合,我不确定您的确切期望是什么。我添加了 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>
希望对您有所帮助。
我推荐的一个有用的 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);
});
});
我想做一个ajaxjquerypost。我已经序列化了表单数据,但我的端点需要将额外的值添加到序列化的表单数据中才能 post 编辑在一起。
要附加到序列化表单数据的对象是
"bridgeConfigurations": [
{
"configName":"Provider_Account_Id",
"configValue":"xxxxx"
},
{
"configName":"Provider_Auth_Token",
"configValue":"xxxxx"
}
]
关于如何实现的任何帮助
您可以这样组合,我不确定您的确切期望是什么。我添加了 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>
希望对您有所帮助。
我推荐的一个有用的 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);
});
});