如何从静态 html 网页表单发送 javascript https 帖子或 webhook？答案

【问题标题】：How do I send javascript https post or webhook from static html web page form?如何从静态 html 网页表单发送 javascript https 帖子或 webhook？
【发布时间】：2020-02-28 16:23:04
【问题描述】：

我有一个带有表单的静态 HTML 网页。填写表格后，我希望提交按钮将 http 帖子发送到其他地方的 webhook 进行处理。

这背后的故事是我有 Hugo 网站，它都是静态的 html 页面。其中一页上有一张表格。如果有人填写了该表单并单击了提交按钮，我希望通过我设置的用于处理表单数据的 webhook 将该数据发送到 Azure Function、Azure Runbook 等。

这种事情可能吗？

请注意，Hugo 网站托管在 PHP 或任何服务器端处理等不可用的存储上。这就是为什么我正在寻找另一种方式。如果可能的话，我唯一的想法是客户端 javascript，但我对 Javascript 不是很好。

这是我到目前为止所拥有的，如果可能的话，但从未收到过 webhook。所以有些事情是不对的，或者不是我想的那样，也不可行：

<script>
function sendWebhook() {
    var content = {"value1" : "test data"};
    var url = "https://s16events.azure-automation.net/webhooks?token=<myToken>";
    var options =  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(content)
};
return UrlFetchApp.fetch(url, options);
}
</script>
<input id="contact-submit" type="button" class="btn btn-transparent" value="Submit" onclick="sendWebhook()" />

【问题讨论】：

标签： javascript html forms azure hugo

【解决方案1】：

如果你想通过 js 从静态 html 调用 webhook，恐怕目前是不可能的，因为 Azure 自动化 webhook 目前不支持 CORS。见user voice here。

但您可以使用 CORS configed 从静态 html 调用 Azure Function。这是我使用 c# 触发的 http 函数代码：

#r "Newtonsoft.Json"

using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using Newtonsoft.Json;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)
{
    log.LogInformation("C# HTTP trigger function processed a request.");

    string value1 = req.Query["value1"];

    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    dynamic data = JsonConvert.DeserializeObject(requestBody);
    value1 = value1 ?? data?.value1;

    return value1 != null
        ? (ActionResult)new OkObjectResult($"Hello, {value1}")
        : new BadRequestObjectResult("Please pass a value1 on the query string or in the request body");
}

它会在您的 html 中回复您“value1”的值。

这是html的代码：

<script>
function sendWebhook() {

    var http = new XMLHttpRequest();
    var url = '<URL OF YOUR AZURE FUNCTION>';
    var content = {"value1" : "test data"};
    http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/json');

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(JSON.stringify(content));

}
</script>


<input id="contact-submit" type="button" class="btn btn-transparent" value="Submit" onclick="sendWebhook()" />

让我们去你的 Azure 函数 =>Platform features=>CORS 用 "*" 启用所有 Origins，以便我们可以在本地测试：

测试结果：

如您所见，您的 value1 数据已发布。

【讨论】：