时间戳

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

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

问题描述

我正在尝试从添加到 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 中，或者是否有更好的方法来实现相同的目标。

标签： javascriptjqueryhtmlformsslack-api

解决方案

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

    document.getElementById("fname").value;

资料来源：https ://www.tutorialrepublic.com/faq/how-to-get-the-value-of-text-input-field-using-javascript.php

发布请求应该如下所示：

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

来源：https ://www.webucator.com/how-to/how-send-receive-json-data-from-the-server.cfm

https://api.jquery.com/jQuery.post/

推荐阅读