Call a POST request from html or js file, Express

Question

So I just started trying out some light back-end developing for the first time using express. And I want to call a POST request from a html/js file, and I found how to do it with Jquery. However I would like to know how you can do the exact same thing in pure javascript. Here is the code I have in Jquery:

---Server---

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));

const greens = {"orange"}

app.get("/greens", (req, res) => {
    res.json(greens);
});

app.post('/greens', (req,res) => {
  var itemName=req.body.itemName;
  console.log("name = "+itemName);
  res.end("yes");
});

app.listen(3000, "localhost", () => {
    console.log("the server is up and running! http://localhost:3000/greens");
});

---JS File---

$(document).ready(function(){
    var itemName;
    $("#submit").click(function() {
        let Name = "banana";
        $.post("http://localhost:3000/login",{itemName: Name}, function(data){
        });
    });
});

ps. The HTML code I have is only a button with the id "submit". pps. I know the code doesn't really do anything, but I just want to know how to translate the jquery to javascript, nothing else.

Solved using fetch!

    fetch("http://localhost:3000/login",
{
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({itemName: "user"})
});

score 1 · Accepted Answer · answered Apr 19 '20 at 11:12

There are two ways to do that. It depends if you want to use ES5 or ES6 and above.

For ES5 try to look here, it's explained quite well: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

For ES6 you can use the fetch-API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Hope this tutorials will help you!

MrByte · Answer 2 · 2020-04-19T12:33:18.863

1

The jQuery code can be translated to the following pure JS code:

document.getElementById("submit").addEventListener("click", () => {
    let xmlHttp = new XMLHttpRequest();
    let Name = "banana";

    xmlHttp.open("post", "http://localhost:3000/login", true);
    xmlHttp.setRequestHeader("Content-Type", "application/json");
    xmlHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xmlHttp.send(JSON.stringify({itemName: Name}));
});

As for the document ready part, you can find a pure implementation of it here: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

edited Apr 19 '20 at 12:33

answered Apr 19 '20 at 11:14

MrByte

1,073
2
11
21

However when I send it in I only get undefined o.o document.getElementById("submit").addEventListener("click", () => { let xmlHttp = new XMLHttpRequest(); Name="banana"; xmlHttp.open("post", "http://localhost:3000/greens"); xmlHttp.send({itemName: Name}); }); – Christofer Carlsson Apr 19 '20 at 11:34
I still get undefined o.o – Christofer Carlsson Apr 19 '20 at 11:53
Try now please, changed it to an AJAX request, should be okay now. – MrByte Apr 19 '20 at 12:03
Now I get "xmlhttp is not defined" xD But I managed to solve it with fetch :) Thank you so much for your time though! – Christofer Carlsson Apr 19 '20 at 12:07
You're welcome, the xmlhttp is not defined was because I accidentally wrote xmlhttp instead of xmlHttp. – MrByte Apr 19 '20 at 12:32

score 0 · Answer 3 · answered Apr 19 '20 at 11:43

Hope this will help you. Use as per your requirement.

SERVER

const express = require('express');
const cors = require('cors')
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors())
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello world');
});

app.post('/greens', (req, res) => {
    const body = req.body;
    console.log('BODY', body);
    res.json(body);
});

app.listen(port, ()=>{
    console.log(`Listening to ${port}`);
})

Frontend code:

$(document).ready(function(){
    const item = $('#item');
    const submit = $('#handleSubmit');
    submit.click((e)=>{
        e.preventDefault();
        let fruitName = item.val();
        debugger;
        $.post( "http://localhost:3000/greens", { itemName: fruitName })
        .done(function( data ) {
          alert( "Data Loaded: " + data );
        });
    })
})

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</head>
<body>
    <form>
        <input type="text" id="item" value="" name="item"/>
        <button type="submit" id="handleSubmit">Submit</button>
    </form>
</body>
</html>

Call a POST request from html or js file, Express

3 Answers3