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

Question

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

我读到 AJAX 可以帮助我做到这一点，但 AJAX 似乎主要用于 POST 数据到 PHP 文件。我不完全确定 Flow 触发器是如何工作的。我正在使用 Flow 触发器 "When an HTTP Request is Received"。我将如何将此表单中的数据提供给 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 的内容类型 header。

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

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

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

Way to get data from HTML form to Microsoft Flow without a page refresh and no php

javascript

html

css

power-automate

专业提示