How to post output to the same webpage in nodejs?

Question

I'm running a nodejs server using the example here:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser());
app.get('/', function(req, res){
  var html = '<form action="/" method="post">' +
               'Enter your name:' +
               '<input type="text" name="userName" placeholder="..." />' +
               '<br>' +
               '<button type="submit">Submit</button>' +
            '</form>';

  res.send(html);
});

app.post('/', function(req, res){
  var userName = req.body.userName;
  var html = 'Hello: ' + userName + '.<br>' +
             '<a href="/">Try again.</a>';
  res.send(html);
});

app.listen(80);

How can I post to the same page instead sending a new html page?

use ajax in clinet side. – user3227295 May 19 '15 at 19:32 — user3227295, May 19 '15 at 19:32

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Use AJAX to make the post call in javascript, and then you won't have to reload the page. Here's an example using jQuery:

Your code should be something along the lines of:

$('#submit').click(function()
{
    $.ajax({
        url: '/',
        type:'POST',
        data:
        {
            userName: userName,
        },
        success: function(msg)
        {
            alert('UserName Sent');
        }               
    });
}

Editted from Submit form without page reloading

edited May 23 '17 at 10:26

Community

1
1

answered May 19 '15 at 19:35

Alexander Mistakidis

3,130
2
20
23

Can I use this to post to an input box or a cell in a table for example? – David May 19 '15 at 19:44
Sure! The `success` callback runs when your ajax call succeeds, and the data it gets back from your node.js app is in the `msg` variable. So you'd add the code to put it in the table in the success callback, using the `msg` variable. – Alexander Mistakidis May 19 '15 at 20:11
then my node.js code above is not changed and I just put this ajax code in some javascript in my html page? – David May 19 '15 at 20:28
For the most part yeah. You won't need to pass html though if you're doing it with ajax, you'll likely want to pass a JSON object. Your node.js code just handles your requests, it's your client (the HTML, javascript and css your node.js server gives to the browser) that handles what to do with them, and how to call them. – Alexander Mistakidis May 19 '15 at 22:13
I have been trying since yesterday but I can't really get this working. I don't know how to pass data from the server to the client. And I can't really understand how should I print results in the webpage. Are there any other simpler methods? I have been looking for examples. But there are no clear and straightforward examples... – David May 20 '15 at 11:30
Hey David, it's definitely frustrating at first! The reason you can't find an example is because it's hard to find one example to answer all your questions. Try to break it down. Have you used JSON before? It's a notation for describing javascript objects. Learn about that. Then try something like `res.json({"foo": "bar"});` in your `post` handler, and put a `console.log(msg);` in your ajax call's `success` function (the result will be in your browser's developer console). See if you can get the data, and then learn how to do something with it :) – Alexander Mistakidis May 20 '15 at 14:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78330/discussion-between-alexander-mistakidis-and-david). – Alexander Mistakidis May 20 '15 at 14:05

How to post output to the same webpage in nodejs?

1 Answers1