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

Blu*_*ull 3 html javascript rest mongodb node.js

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

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

这样的事情:如何从Javascript按钮Handler调用REST Web服务API?

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

谢谢乔

Sem*_*oze 5

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

在这种情况下,您需要将请求函数与form元素绑定。正如您没有提到要发生的事件一样,所以我无法确切地说出解决方案。

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

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

<!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>
Run Code Online (Sandbox Code Playgroud)