Как отправить сообщение Javascript https или webhook из статической HTML-формы веб-страницы? - PullRequest
Новая
       101

Как отправить сообщение Javascript https или webhook из статической HTML-формы веб-страницы?

0 голосов
/ 02 ноября 2019

У меня есть статическая HTML-страница с формой. Когда форма заполнена, я бы хотел, чтобы кнопка «Отправить» отправляла http-сообщение в веб-крючок где-то еще для обработки.

История в том, что у меня есть веб-сайт Hugo, который является статическим html. страницы. На одной из страниц есть форма. Если кто-то заполняет эту форму и нажимает кнопку отправки, я бы хотел, чтобы эти данные отправлялись в функцию Azure, Runbook Azure и т. Д. Через веб-крючок, который я настроил для обработки данных формы.

Естьэто возможно?

Обратите внимание, что веб-сайт Hugo размещается в хранилище, где PHP или любая серверная обработка не доступна. Вот почему я ищу другой путь. Моей единственной идеей был клиентский javascript, если это возможно, но я не очень хорош с Javascript.

Это то, что я имею до сих пор, если это возможно, но веб-крючок никогда не принимается. Так что что-то не так, или не то, что я думаю и не выполнимо: 

<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()" />

1 Ответ

0 голосов
/ 06 ноября 2019

Если вы хотите вызвать webhook из статического html через js, я боюсь, что пока это невозможно, поскольку webhook автоматизации Azure в настоящее время не поддерживает CORS. Смотрите голос пользователя здесь .

Но вы можете вызывать функцию Azure из статического html с настроенным CORS . Это мой код сработавшей функции http, использующий c #: 

#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");
}

Он ответит вам значением "value1" в вашем html.

Это код для 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 => Возможности платформы => CORS, чтобы включить все Origins с помощью «*», чтобы мы могли проверить локально:enter image description here

Результат теста:

enter image description here

Как видите, ваши данные value1 были опубликованы,

...