如何从html表单获取用户输入的数据并添加到JSON字符串以使用JS / Jquery在POST请求中发送

Question

我正在尝试从添加到JSON字符串中的html表单中获取数据，以在POST请求中作为有效负载发送。

到目前为止，我的HTML代码：

<form id="myForm">
      <label class="fnameLabel1" for="fname">FULL NAME</label>
      <input class="fname1" type="text" id="fname" name="fullname" placeholder="" required>

      <label class="emailLabel1" for="email">EMAIL</label>
      <input class="email1" type="text" id="email" name="email" placeholder="" required>

      <input  class="submit1" type="submit" value="Book Now" id="submit1">

    </form>

所以，我真正的问题是，如何在提交时在这些输入字段中输入任何内容：

  <script>  
  $('submit1').click(function () {


     var url = "http://www.my_api_url.com/apiurl";

     var payload = {
       "attachments": [{
         "fallback": "testing:",
         "pretext": "testing:",
         "color": "#00008b",
         "fields": [{
           "title": "Name",
           "value": **NAME ENTERED IN FORM**,
           "title": "Email",
           "value": **EMAIL ENTERED IN FORM**,
           "short": true
         }]
       }]
     }

     $.post(url.JSON.stringify(payload), function (data) {
       $('#result').text(data);
     })
  })
</script>

我不确定我是在做正确的事，还是在做正确的事。我的目标是用户输入数据并点击提交。该数据将发送到所需的api。我不知道如何将数据添加到JSON中，或者是否有更好的方法来实现相同的目标。

Answer 1

创建JS对象的方式看起来很干净（不过我不确定是否需要方括号）。您也如何解析它。要获得输入字段的值，我最简单的纯js解决方案是：