Calling POST method by clicking a button

Question

this is my first time when I'm setting up the server and need help. So my goal is to set up server by NodeJS and Expresss. Let's say we have an app with Admin and Users. When Admin clicks a button, it sends some data for the server, then Users can fetch the data.

So this is my server set up:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port)

I can add some post method, let's say:

 app.post('/', (req, res) => ....);

So I can prepare server reaction for listening the POST method, but I have no idea how to send some data from my app by clicking an button (I mean calling this post method). I've watched a bunch of tutorials and haven't seen any real-world exercises.

score 2 · Answer 1 · answered Sep 25 '18 at 06:49

To receive the POST parameters, you need the body-parser module, which you can include in your app.js like this,

var bodyParser = require('body-parser');
app.use(bodyParser.json());

And here is how you can receive your form fields which are being sent through the POST method,

app.post('/', function(req, res) {
    var someField1 = req.body.some_form_field;
    var someField1 = req.body.form_field1;
});

Hope this helps!

Chirag Shah · Answer 2 · 2018-09-25T06:50:00.803

On your express server

var bodyParser = require('body-parser');
app.use(bodyParser.json());

app.post("/", (req,res) => {
    res.send("Hello");
});

On your webpage/app, You can use axios. Lets say your express server running with localhost and port 4000.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var instance = axios.create({
    baseURL: "http://localhost:4000" //use your express server's url(address) and port here
});

function onclick(){
    instance.post("/").then( response => {
        //response.data will have received data
    }
}
</script>

You can use this function and call it on your button click

I have edited my post using response of @david-r. You will require body-parser package for parsing post requests. — Chirag Shah, Sep 25 '18 at 06:55

p u · Answer 3 · 2018-09-25T06:54:12.070

You can simply use jquery in your HTML page like this to call your api:

$("button").click(function(){
    $.post("/", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

And Send data from your api:

var bodyParser = require('body-parser'); 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/', function(req, res) {
var obj = {};
obj.name="hello";
obj.lname="world" 
res.json(obj);
});

score 0 · Answer 4 · answered Sep 25 '18 at 07:05

Example:

HTML: Your form elements should have name (it is mandatory) to access these in post body request.

<form method="post" action="/">
    <input type="text" name="Name" />
    <br>
    <input type="text" name="Telephone" />
    <br>
    <input type="submit" />
 </form>

app.js

const express = require('express')
const app = express()
const port = 3000
var bodyParser = require('body-parser');
app.use(bodyParser.json());

app.post('/', (req, res) => {
    name = req.body.Name;
    telephone = req.body.Telephone;

    res.render('somefolder/index', {
       name: name,
       telephone: telephone,
    });
    // Above code is for reference if you want to load another page after post complete and get posted values in this page too.
    res.end();

});

Calling POST method by clicking a button

4 Answers4