如何将 HTML 表单输入插入 API 对象数组

Question

我想合并两个代码“sn-ps”，但我真的不知道如何合并。

我已经设法将 HTML 表单输入到 JSON 对象中。见codepenhere。

当我单击“添加注释”按钮时，我想获取输入值 -> 将它们设置为对象 -> 将它们发布到我的 api 对象数组。图片和代码示例如下：

HTML 转 JSON

// CREATE NEW NOTES
var btn = document.getElementById('btn');

btn.addEventListener("click", function() {

var request = new XMLHttpRequest();

request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes');

request.setRequestHeader('Content-Type', 'application/json');

request.onload = function () {

    // When I click the "Add note" btn I want to grab the input values -> make them to an object -> POST them to my api object array.

    // Like

    // var body = {
    //  'title': form.title.value,
    //  'description': form.description.value
    // }

};

request.send(JSON.stringify(body));

});

这是我拥有的当前代码，让我发送一个已设置的具有对象属性的变量。见下图：

发送 JSON

但是我的问题是关于如何组合这些示例以便进行动态输入 -> 将它们转换为 JSON 对象 -> 将它们插入 api 对象数组中。

如果您认为我走错了路，或者您认为有解决方案，请随时纠正我！

如果您有任何问题或需要澄清，请不要犹豫！

先谢谢了！

// E

Answer 1

你可以这样组合它们（我认为这是最好的方法）：

定义一个将在表单提交时执行的函数，它将创建 JSON 并通过 ajax 发送：

function formatJSONAndSend(form) {
  var body = {
    title: form.title.value,
    description: form.description.value
  };

  var request = new XMLHttpRequest();
  request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes');
  request.setRequestHeader('Content-Type', 'application/json');    
  request.send(JSON.stringify(body));
}

您可以通过HTML 调用它，例如：

<form onsubmit="formatJSONAndSend(this);">
    Title: <input type="text" class="form-control" name="title" placeholder="Title goes here..." /><br /> Description: <input type="text" class="form-control" name="description" placeholder="Description goes here..." /><br />
    <input class="btn btn-primary" id="btn" type="submit" value="Add note">
</form>

点击添加注释按钮提交表单后，它将调用formatJSONAndSend()函数，该函数首先从表单中获取数据并将其放入body对象，然后发送通过 POST 发送到您的 Web api。

这是一个工作示例：Codepen