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

我正在尝试创建一个HTML表单，用于统计体育比赛中的参赛者，然后将数据传递给Microsoft Flow。我在JavaScripted Geofence后面有html表单。我希望能够获取表单数据，无需页面刷新，将其编译成JSON，然后将其传递给Microsoft Flow，而无需使用PHP或中间步骤

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

姓。（每次使用相同的名称，否则您将得不到分数。）

学校电邮地址

你在几年级？

你参加哪场比赛？

函数提交（）{
console.log（“我赢了”）
}
函数submitform（）{
控制台日志（“一”）
var form=document.getElementById（“yummyfood”）
var formData=JSON.stringify（$（“#myForm”）.serializeArray（）；
$.ajax({
类型：“POST”，
url:“https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k“，
数据：formData，
成功：函数（formdone）{}，
数据类型：“json”，
contentType:“应用程序/json”
console.log（formData）
});
}
函数formdone（）{
yummyfood.style.display='none'
}

---

我从这个和它的许多变体中什么也得不到。非常感谢您的帮助。

您的代码示例中存在大量语法错误，还有一些孤立的方法，如

submit（）

和

submitform（）

，它们将永远不会被调用，从而导致ajax代码永远不会运行

下面是一个从您提供的代码示例派生的工作示例。这应该足够让你走了

姓。（每次使用相同的名称，否则您将得不到分数。）


学校电邮地址


你在几年级？


你参加哪场比赛？

//将按钮单击事件绑定到函数
$（函数（）{
$（“#提交按钮”）。单击（提交）；
});
/**
*提交表格。
*/
函数提交（）{
var formData=$（“#myForm”）.serializeArray（）；
var jsonData=formDataToJson（formData）；
//将数据发布到http端点
$.ajax({
类型：“POST”，
url:“https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k“，//替换为Microsoft Flow HTTP请求操作URL
资料来源：jsonData，
数据类型：“json”，
contentType:“应用程序/json；字符集=UTF-8”
})
.done（（数据、文本状态、jqXHR）=>{
console.log（textStatus）；
})
.fail（（jqXHR、textStatus、errorshown）=>{
log（`${textStatus}:${errorshown}`）；
});
}
/**
*将表单数据转换为json。
*@param{Object}formData-表单数据。
*/
函数formDataToJson（formData）{
var对象={}；
formData.forEach（（值，键）=>{
对象[value.name]=value.value
});
返回JSON.stringify（object）；
}

专业提示 流中的HTTP请求触发器始终希望内容类型头为

application/json

设置流HTTP请求操作的请求主体JSON模式，使其与所发送数据的模式匹配

---

AJAX允许您向URL发送HTTP请求。没有任何东西限制它只使用POST方法，或者发送到使用PHP的服务器。因此，请检查您的流所期望的HTTP请求类型，然后使用AJAX生成一个请求。“我从中什么也得不到”……除非您在将其复制到此处时出错，否则您的JavaScript中存在多个语法错误。您正在检查控制台是否有错误？此外，您没有任何东西可以触发“submitform（）”函数并实际运行AJAX请求。@ADyson能否详细说明如何使用AJAX来完成此操作？非常感谢。我明白这是可能的，我只是不知道怎么做。@ADyson，我也知道有错误；而扳机的位置更低。我只是提供了代码，所以我可以得到更详细的帮助。很棒的帖子！保存了我的一个**：）

  <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>

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