如何从 HTML 表单调用现有的 REST api?

Posted

技术标签:

【中文标题】如何从 HTML 表单调用现有的 REST api?【英文标题】:How to call existing REST api from a HTML form? 【发布时间】:2018-08-11 15:50:56 【问题描述】:

我有一个 REST API,我在移动应用程序中使用它来将数据注册/存储到 Mongo 数据库中。我现在想在网页上查看存储在数据库中的数据。

我知道我基本上已经拥有所有功能(在我的移动应用程序中使用的登录请求),但我对如何从我的 html 页面调用我的 REST 感到很困惑。

类似这样的:How to call a REST web service API from javascript button Handler? ?

我也对应该如何/在哪里创建我的 html 页面感到困惑。任何帮助表示赞赏。

谢谢,乔

【问题讨论】:

在客户端使用JS? 是的,node.js。只是一个简单的登录网页,然后在表格中显示用户是我正在尝试的 【参考方案1】:

通常当用户想从服务器获取数据时。客户端需要向服务器发送请求并获得响应。通常程序员会将请求函数与特定元素和events绑定在一起。

在这种情况下,您需要将请求函数与表单元素绑定。由于您没有提及您想要发生的事件,所以我无法确切地说明解决方案。

以下代码是一个简单的代码,当用户在文本输入中键入时调用 REST API,并在输入文本下方显示结果

请注意将“URL”替换为您的 API 调用。

<!DOCTYPE html>
<html>
<body>
    <form>
        Keyword:<br>
        <input type="text" name="keyword" onkeyup="callREST()"><br>
    </form>
    <div id="response"></div>

    <script>
        function callREST() 
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() 
                if (this.readyState == 4 && this.status == 200) 
                    document.getElementById("response").innerHTML = this.responseText;
                
            ;
            xhttp.open("GET", "URL", true);
            xhttp.send();
        
    </script>
</body>
</html>

【讨论】:

我只需要登录,如果登录成功显示用户列表。我不确定我的 API 调用应该是什么样子,没有在 android Studio 之外使用过类似的东西

以上是关于如何从 HTML 表单调用现有的 REST api?的主要内容,如果未能解决你的问题,请参考以下文章

使用 rest api 下载现有的贝宝付款

如何确保请求从固定页面命中 REST api?

从 Ajax 调用 Spring Boot Rest API 时出现 CORS 错误

编写一个包装器将现有的 REST API 公开为 SOAP Web 服务?

如何从 Movilizer Movelet 进行 REST 调用

生成rest api代码?