在表单提交时将 javascript 变量发布到 JSON

Question

我需要将数字格式传递给 JSON，并且我不能使用隐藏的输入类型，因为它返回字符串。我有 const formDataJsonString = JSON.stringify(plainFormData); 将表单数据转换为 JSON（见下文）

如何使用我在下面添加的函数将 javascript 变量从表单发布到 JSON？

我写这个是为了把它转换成数字，但不知道如何将 javascript 变量提交到 JSON。

<input type="hidden" class="number" name="applicationType" value=3>

$("#form").submit(function(){
    var formInfo = document.forms['form'];
    var applicationType = parseInt($(".number").val());
});

JSON 中的期望结果：

applicationType: 3

代替：

applicationType: "3"

更新 1： 所以我有这个把它变成JSON，然后发布它：

//url is the api
async function postFormDataAsJson({ url, formData }) {
    const plainFormData = Object.fromEntries(formData.entries());
    
//put all accountsToLink value into an array
plainFormData["accountsToLink"] = new Array //create array
$("input[name=accountsToLink] ").each(function() {
plainFormData["accountsToLink"].push($(this).val()) //push value in array
});

    const formDataJsonString = JSON.stringify(plainFormData);
    const fetchOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
        },
        body: formDataJsonString,
    };
    const response = await fetch(url, fetchOptions);
    if (!response.ok) {
        const errorMessage = await response.text();
        throw new Error(errorMessage);
    }
    else if (response.ok) {
        window.location.href = "confirmation.html";
    }
    return response.json();
}



async function handleFormSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    const url = form.action;
    try {
        const formData = new FormData(form);
        const responseData = await postFormDataAsJson({ url, formData });
        console.log({ responseData });
    } catch (error) {
        console.error(error);
    }
}
const testform = document.getElementById('testform');
testform.addEventListener('submit', handleFormSubmit);

Answer 1

所以你没有提到你没有做你在最初的帖子中所做的事情，而是你使用了 formData

您不能将 formData 用于 JSON 整数。

您可以映射一个序列化数组并将其字符串化

async function postFormDataAsJson({ url, formData }) {
  const formDataJsonString = JSON.stringify(formData);
  console.log(url,formDataJsonString)
  // ....
}


async function handleFormSubmit(event) {
  event.preventDefault();
  const form = event.currentTarget;
  const url = form.action;
  try {
    const formData = $(form).serializeArray().map(
      item => ({ [item.name]: isNaN(item.value) ? item.value : +item.value})
    );
    const responseData = await postFormDataAsJson({ url, formData }); 
  } catch (error) {
    console.error(error);
  }
}

$("#testform").on("submit", handleFormSubmit);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testform" action="/bla.php">
  <input type="hidden" class="number" name="applicationType" value=3>
  <input type="submit" />
</form>