无需刷新页面且无需 php 即可将数据从 HTML 表单获取到 Microsoft Flow 的方法

Question

我正在尝试创建一个 HTML 表单来记录参加体育比赛的人，然后将该数据传递给 Microsoft Flow。我有一个 JavaScript 地理围栏后面的 html 表单。我希望能够获取该表单数据，并且无需刷新页面，将其编译为 JSON，然后将其传递给 Microsoft Flow，而无需使用 PHP 或中间步骤。

我读过 AJAX 可以帮助我做到这一点，但 AJAX 似乎主要用于将数据 POST 到 PHP 文件。我不完全确定 Flow 触发器是如何工作的。我正在使用流触发器“收到 HTTP 请求时”。我将如何将此表单中的数据提供给 Flow？谢谢你。 （为了澄清代码，当按下签入按钮时， getLocation() 使表单可见）。

  <h4 id="loc" style="text-align:center;"></h4><br>
  <h4 id="word" style="text-align:center;"></h4><br>

  <div  class="wow fadeInUp" data-wow-delay="0.2s" style="text-align:center;">
    <form id="yummyfood" style="display:none;" action="javascript:void(0);" name="CheckIn" method="post">
      <p><label for="name">First Last Name. (Use same name every time or you won't get your points.)</label>
        <input type="text" name="name" id="name"></p>

        <p><label for="email">School Email Address</label>
          <input type="text" name="email" id="email"></p>

          <p><label for="grade">What Grade are you in?</label>
            <input type="text" name="grade" id="grade"></p>

            <p><label for="game">Which game are you at?</label>
              <input type="text" name="game" id="game"></p>


        </form>
        <button value="Submit" type="button" onclick="formdone()">
    </div>


    <!--FormScript-->
    <script>
    function submit(){
      console.log("i win")
    }
      function submitform() {
      console.log("one")
    var form = document.getElementById("yummyfood")
    var formData = JSON.stringify($("#myForm").serializeArray());
    $.ajax({
      type: "POST",
      url: "https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k",
      data: formData,
      success: function(formdone){},
      dataType: "json",
      contentType : "application/json"
      console.log(formData)
    });
  }
    function formdone() {
      yummyfood.style.display = 'none'
    }
    </script>

我没有从中得到任何东西以及它的许多变化。任何帮助表示赞赏。

Answer 1

您的代码示例中存在许多语法错误以及像 submit() 和 submitform() 这样的孤立方法，它们永远不会被调用，从而导致 ajax 代码永远不会运行。

这是一个源自您提供的代码示例的工作示例。这应该足以让您继续前进。

<form id="myForm">
    <p>
        <label for="name">First Last Name. (Use same name every time or you won't get your points.)</label>
        <input type="text" name="name" id="name">
    </p>
    <p>
        <label for="email">School Email Address</label>
        <input type="text" name="email" id="email">
    </p>
    <p>
        <label for="grade">What Grade are you in?</label>
        <input type="text" name="grade" id="grade">
    </p>
    <p>
        <label for="game">Which game are you at?</label>
        <input type="text" name="game" id="game">
    </p>
</form>

<input id="submitButton" type="button" value="Submit">

<script>
    // Bind button click event to function
    $(function () {
        $('#submitButton').click(submit);
    });

    /**
     * Submits the form.
     */
    function submit() {
        var formData = $("#myForm").serializeArray();
        var jsonData = formDataToJson(formData);

        // Post data to http endpoint
        $.ajax({
            type: "POST",
            url: "https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k", // Replace with Microsoft Flow HTTP request action URL
            data: jsonData,
            dataType: "json",
            contentType: "application/json;charset=UTF-8"
        })
            .done((data, textStatus, jqXHR) => {
                console.log(textStatus);
            })
            .fail((jqXHR, textStatus, errorThrown) => {
                console.log(`${textStatus}: ${errorThrown}`);
            });

    }

    /**
     * Converts form data to json.
     * @param {Object} formData - The form data.
     */
    function formDataToJson(formData) {
        var object = {};
        formData.forEach((value, key) => {
            object[value.name] = value.value
        });
        return JSON.stringify(object);
    }
</script>

专业提示

Flow 中的 HTTP 请求触发器始终需要 application/json 的内容类型标头。

设置您的 Flow HTTP 请求操作的请求正文 JSON 架构，以匹配您发送的数据的架构。

{
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "email": {
            "type": "string"
        },
        "grade": {
            "type": "string"
        },
        "game": {
            "type": "string"
        }
    }
}