如何使用 Jquery 解析“结构化”输入标签数据，以便我可以通过 jQuery AJAX 发送它？

Question

我需要使用 Jquery 从元素（例如 div）中提交未知的输入数据。仅供参考，我无法使用表单元素，因为此数据可能已经位于表单内。

由于缺乏更好的词语，输入名称需要以某种方式“结构化”，因为它们可以是任何东西，而我不会提前知道，类似于：

    <div id="mydata">
        First Name: <input type="text" name="custom:firstname">
        <br>
        Last Name: <input type="text" name="custom:lastname">
        <br>
        Favorite Ice Cream: <input type="text" name="custom:icecream">
        <br>
        <button id="submitmydata">Submit</button>
    </div>

如果我已经知道所有输入字段名称，我知道如何处理和发送输入字段数据，但在这种情况下，自定义的未知变化：输入字段名称的某些内容我不知所措。字段名称不必命名为 custom:something，我只是不知道还可以命名它们什么才能使其正常工作。

有没有办法创建和解析这种随机数据，以便我可以使用 jquery ajax 发送它而不使用表单标签？

我可以对此做些什么来发送自定义样式数据？

    var mydata = somehow parse all "custom:whatever" here
    
    $.ajax({
        url: '/myurl.html',
        data: { customdata: mydata },
        type: 'POST'
    });

我搜索了 stackoverflow 和各种网络教程，但没有找到实现这一目标所需的内容。 JS 不是我的主要编码语言，所以我可能会错过一些简单的东西。

Answer 1

您可以循环所有

<input>

元素并记录它们的名称/值。 例如：

$('#submitmydata').on('click', () => {
  const myObj = {};
  $('input').each((i, el) => myObj[el.name] = el.value);
  console.log(myObj);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="mydata">
  First Name: <input type="text" name="custom:firstname">
  <br>
  Last Name: <input type="text" name="custom:lastname">
  <br>
  Favorite Ice Cream: <input type="text" name="custom:icecream">
  <br>
  <button id="submitmydata">Submit</button>
</div>