POST запрос на HTML - PullRequest
       6

POST запрос на HTML

0 голосов
/ 26 марта 2020

Так что я попытался сделать URL Shrinker для развлечения и использовал для него учебник Traversy Media.

Вот GitHub его проекта: https://github.com/bradtraversy/url_shortener_service

Чтобы превратить его в полноценный веб-сайт, мне нужно создать пользовательский интерфейс ...

Но я застрял с запросом POST, который я генерирую через e js.

Я в настоящее время Я написал этот код в моем index.e js:

<body>
    <header class="header">
        <h1>Shrinker</h1>
    </header>
    <div class='main'>
        <form action="http://localhost:5000/api/url/shorten" method="POST" class="content">
             <h2 class="shortenheader">Url Shortener</h2>
             <div class="input-group">
                  <input  type="shortUrl"  class='neumorph-input' placeholder='Your Link' />
                  <input type="submit" class='neumorph-btn'>
             </div>
        </form>
    </div>
</body>

Но он всегда выдает мне ошибку «Неверный длинный URL», которая исходит из структуры кода файла в маршрутах / URL. js.

В этом уроке он использовал простой запрос POST с типом приложения / / 1026 *. Который работал просто отлично. Я использую mongodb atlas , поэтому облачная версия базы данных.

POST http://localhost:5000/api/url/shorten
Content-Type: application/json

{
  "longUrl": "https://www.stackoverflow.com"
}

Я думаю, мне нужно использовать этот тип в моем index.e js, но я не знаю, как это сделать. Может кто-нибудь помочь, пожалуйста?

1 Ответ

0 голосов
/ 26 марта 2020

Что ж, форма HTML отправляется в виде строки с кодированием urlen (точно так же, как строка запроса GET) или данных формы (которая может содержать вложения), но не JSON. См. https://www.w3.org/TR/html401/interact/forms.html#adef -enctype

Для этого вам нужно будет сделать запрос AJAX, в котором вы сможете отправлять любые данные, которые вам нужны.

Для формирования тела запроса вы можете сериализовать форму и затем преобразовать ее в JSON. Или, проще всего, поскольку есть только одно свойство, вы можете построить тело вручную: var data=JSON.stringify({longUrl:$("#shortUrl").val()});.

Также у вас есть ошибка. type="shortUrl" недействительно. Это должно быть type="text" и name="shortUrl", или id="shortUrl", чтобы иметь возможность выбрать его с помощью $("#shortUrl").

Если вы никогда не делали этого, самый простой способ был бы с jQuery. См https://api.jquery.com/jquery.ajax/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...