HTML 上的 POST 请求答案

【问题标题】：POST request on HTMLHTML 上的 POST 请求
【发布时间】：2020-03-26 22:41:29
【问题描述】：

所以我尝试制作一个 URL Shrinker 来取乐，并使用 Traversy Media 教程。

这是他项目的 GitHub：https://github.com/bradtraversy/url_shortener_service

为了使它成为一个完整的网站，我必须制作一个 UI...

但是我被我通过 ejs 生成的 POST 请求卡住了。

我目前已经在我的 index.ejs 中编写了这段代码：

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

但它总是给我错误“Invalid long url”，这是来自 routes/url.js 中文件的代码结构。

在教程中，他使用了一个简单的 POST 请求，内容类型为 application/json。效果很好。我用的是mongodb atlas，所以是云版的数据库。

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

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

我想我必须在 index.ejs 中使用该类型，但我不知道该怎么做。有人可以帮忙吗？

【问题讨论】：

复制：stackoverflow.com/questions/32553039/…
"我正在通过 ejs 生成" — POST 请求是由浏览器与 HTML 表单的交互生成的，而不是 EJS。表单是由 EJS 生成的无关紧要。

标签： html node.js mongodb express

【解决方案1】：

嗯，HTML 表单作为 urlencoded 字符串（就像 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/

【讨论】：

所以我必须用脚本标签将它添加到正文中？类似的东西：` `