让 HTML 表单使用 JSON API答案

【问题标题】：Letting HTML forms make use of JSON APIs让 HTML 表单使用 JSON API
【发布时间】：2013-08-20 12:09:13
【问题描述】：

所以，我花了很多时间编写一个很酷的 RESTful API。为简化起见，可以通过对/users 执行POST 请求来创建新用户。

太好了，嗯？但是现在我的 HTML 表单想要创建一个用户。它的所有元素都与需要传递给/users 的参数相同。因此，form 充分利用这个优秀的 API 似乎很有意义。

我的表单位于/register.html。它的属性现在是：action="/users" method="post"。开箱即用地与我的 API 完美集成！

问题？我的 RESTful API 将以 JSON 响应，而我的表单无法处理此响应。例如，当传递无效的电子邮件地址时，返回的正文可能是{"error": 400, "msg": "The given email address is invalid."}。相反，register.html 应该收到此消息并显示适当的消息，同时允许用户修复输入错误。

一个明显的解决方案是根本不发送表单，而是使用 AJAX 根据输入值与 API 进行交互。但是，这远非理想，因为该表单对于没有 Javascript 的人来说毫无用处。

我可以考虑其他方法吗？还是我不应该将表单输入与我的 API 结合起来？

我认为这并不重要，但我正在使用 Node.js。

【问题讨论】：

标签： javascript html forms node.js api

【解决方案1】：

一种选择是双模式 API：接受 JSON 和表单数据输入，返回 JSON 和 HTML（或 HTML 片段）作为响应。

HTML 片段开始在无缝 iframe 的上下文中变得有意义；与此同时，这种方法仍然会在客户端上使用 javascript。完整的 HTML 是经典的网络——没有什么可以阻止您的资源同时呈现 HTML 和 JSON。

Accept 和 Content-Type 标头是您的朋友。暂时不要将资源的 URL 与其表示与资源本身混淆。这是三个不同的东西。是的，有时它很混乱。世界也是如此！

【讨论】：

看起来很有趣，但用户在地址栏中看到/api/v1/users 会不会很困惑？他可能会期待/register.html。
解决与原始地址register.html 不同的地址上的输入问题的另一个问题是，即使这本质上是相同的页面，但地址却非常不同。搜索引擎不赞成这样做，并且会破坏网站分析。
然后继续……如果用户刷新页面（导航到相同的地址），浏览器会向/api/v1/users发送一个GET请求，这具有完全不同的含义。此请求将检索所有用户，这是用户没有预料到的。