让HTML表单使用JSONAPI

Letting HTML forms make use of JSON APIs

本文关键字：JSONAPI 表单 HTML 更新时间：2023-09-26

所以，我花了很多时间编写一个很酷的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.

一个选项是一个双模API：接受JSON和表单数据输入，发出JSON和HTML（或HTML片段）作为响应。

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

Accept和Content-Type标头是您的朋友。暂时不要将资源的URL及其表示形式与资源本身混淆。这是三件独立的事情。是的，有时候很乱。世界也是如此！