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

I have a REST API that I am using in a mobile application to register/store data into a Mongo database. I would now like to view the data stored in the DB on a webpage.

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

I know that I basically have all of the functionality already (the login request used in my mobile application) but I am so confused on how to call my REST from my HTML page.

我知道我基本上已经拥有了所有功能（我的移动应用程序中使用的登录请求），但我对如何从我的HTML页面调用我的REST感到困惑。

Something like this: How to call a REST web service API from Javascript button Handler? ?

像这样：如何从Javascript按钮处理程序调用REST Web服务API？？

I am also confused on how/where I should be creating my html page. Any help is appreciated.

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

Thanks, Joe

谢谢，乔

1 个解决方案

#1

Typically When user would like to get data from the server. client need to send a request to the server and get a response. Usually programmer will bind a request function with an specific element and events.

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

In this case you need to bind a request function with form element. As you didn't mention which event you want to happen, so I couldn't tell exactly solution.

在这种情况下，您需要使用表单元素绑定请求函数。因为你没有提到你想要发生的事件，所以我无法确切地说出解决方案。

The following code is a simple code that call REST API when user type on a text input, and show the result below the input text

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

Note that replace "URL" with your API call.

请注意，将“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>

#1