How to call existing REST api from a HTML form?

Question

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.

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.

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

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

Thanks, Joe

Yes, node.js. Just a simple login webpage and then show users in a table is what I'm attempting — BlueBull, Mar 03 '18 at 16:42

Semooze · Answer 1 · 2018-03-03T16:08:01.777

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

Note that replace "URL" with your API call.

<!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>

I just need to log in and if log in is successful show a list of users. I am unsure what my API call is supposed to look like, not used anything like this outside of Android Studio — BlueBull, Mar 03 '18 at 16:47

score 0 · Answer 2 · answered Oct 26 '22 at 04:54

This is how you do it...

HTML Code:

<form id="form" onsubmit="return setAction(this)">                                       
        <input name="senderEmail" type="email" placeholder="Email" required>                                       
        <textarea  name="senderMessage" cols="30" rows="10" placeholder="Message.." required></textarea>
        <button type="submit">Send message</button>
</form>

Javascript:

function setAction(form) {
  const url = 'https://example.com/xyz?';
  const andSign = '&';
  const senderParameter = 'sender='+form.senderEmail.value;      
  const bodyParameter = 'body='+form.senderMessage.value;
  const newUrl = url+senderParameter+andSign+bodyParameter;

  fetch(
    newUrl,
    {            
        headers: { "Content-Type": "application/json" },            
        method: "POST",
        body: ""
    }
   )
  .then(data => data.json())
  .then((json) => {
    alert(JSON.stringify(json));
    document.getElementById("form").reset();     
  });
  return false;
}

This also resets your form after a successful api call is made.

How to call existing REST api from a HTML form?

2 Answers2