将对象数组添加到表单对象

Question

我有一个这样的 html 表单：

<form action="/create" method="POST">
    <input type="text" placeholder="title" name="title">
    <input type="text" placeholder="year" name="toYear">
    <input type="text" placeholder="genre" name="genre">
    <input type="text" placeholder="director" name="director">    
    <input type="url" placeholder="poster" name="poster">
    <textarea name="plot" placeholder="plot..." cols="30" rows="10"></textarea>            
    <div id="actors">
        <h5>Actors</h5>
        <button type="button" id="addActor">Add Actor</button>
    </div>
    <div id="ratings">
        <h5>Ratings</h5>
        <button type="button" id="addRating">Add Rating</button>
    </div>
<button type="submit">Add to Collection
</button>
</form>

还有我下面的脚本：

document.getElementById('addRating').addEventListener('click', function () {
    var ratingsElem = document.getElementById('ratings');
    var sourceElem = document.createElement("input");
    sourceElem.setAttribute('type', 'text');
    sourceElem.setAttribute('placeholder', 'Source');
    sourceElem.setAttribute('name', 'ratingsSource');
    var valueElem = document.createElement("input");
    valueElem.setAttribute('type', 'text');
    valueElem.setAttribute('placeholder', 'value');
    valueElem.setAttribute('name', 'ratingsValue');

    ratingsElem.appendChild(sourceElem);
    ratingsElem.appendChild(valueElem);
})
document.getElementById('addActor').addEventListener('click', function () {
    var ActorsElem = document.getElementById('actors');
    var actorElem = document.createElement("input");
    actorElem.setAttribute('type', 'text');
    actorElem.setAttribute('placeholder', 'Name');
    actorElem.setAttribute('name', 'actors');
    ActorsElem.appendChild(actorElem);
});

提交时一切顺利，但我想将 Rating 值制作成一个评级对象数组，如下所示：

"Ratings": [
{
  "Source": "Internet Movie Database",
  "Value": "8.8/10"
},
{
  "Source": "Rotten Tomatoes",
  "Value": "91%"
},
{
  "Source": "Metacritic",
  "Value": "92/100"
}
  ]

并将其附加到发送到服务器的表单数据中。我怎样才能做到这一点？........................................

Answer 1

var formData = JSON.stringify($("#myForm").serializeArray());

您可以稍后在 ajax 中使用它。或者如果你没有使用ajax;将其放在隐藏的文本区域中并传递给服务器。如果此数据通过普通表单数据作为 json 字符串传递，则必须使用 json_decode 对其进行解码。然后，您将获取数组中的所有数据。

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

参考 ： 如何使用 html 表单数据发送 JSON 对象

Answer 2

这几乎是不可能的，但这是最简单的方法

var rating = 0;
document.getElementById('addRating').addEventListener('click', function () {
  var ratingsElem = document.getElementById('ratings');
  var sourceElem = document.createElement("input");
  sourceElem.setAttribute('type', 'text');
  sourceElem.setAttribute('placeholder', 'Source');
  sourceElem.setAttribute('name', 'Ratings[' + rating + '][Source]');
  var valueElem = document.createElement("input");
  valueElem.setAttribute('type', 'text');
  valueElem.setAttribute('placeholder', 'value');
  valueElem.setAttribute('name', 'Ratings[' + rating +  '][Value]');
  ratingsElem.appendChild(sourceElem);
  ratingsElem.appendChild(valueElem);
 rating++;

}(;

如果您想在不添加变量评级的情况下做到这一点，您可以在源的每个新输入上计算他的索引，然后使用相同的索引添加输入值......

我希望这是有帮助的...

这是我测试时的输出：

{
  "title": "",
  "toYear": "",
  "genre": "",
  "director": "",
  "poster": "",
  "plot": "",
  "Ratings": [
    {
      "Source": "1",
      "Value": "2"
    },
    {
      "Source": "2",
      "Value": "3"
    }
  ]
}