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

Question

我有两个代码＆＃34;代码段＆＃34;我想要结合，但我真的不知道如何。

我设法将HTML表单输入到JSON对象中。请参阅codepen here。

当我点击＆＃34;添加备注＆＃34; btn我想获取输入值 - ＆gt;让他们成为一个对象 - ＆gt;将它们发布到我的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

然而，我的问题是如何将这些例子组合在一起，以便我可以进行动态输入 - ＆gt;将它们转换为JSON对象 - ＆gt;将它们插入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发送到您的网络API。

以下是一个工作示例：Codepen