Simple button click example with Ajax and Node.js?

Question

I am new to both Ajax and Node.js + Express. At this point I am trying to figure out how to communicate with both the front and back end through buttons.

I have a button on an HTML page which I would like to use to call a function from the backend and output text to the client.

Here is what I've pieced together for what I need but I am looking for an example on how this could be done.

This is all happening on /page

index.hjs file

<button class="btn btn-success" onclick="install()">Install</button>

// Client Side Ajax Script
<script>
    $('button').click(function () {
        $.post('/page', {data: 'blah'}, function (data) {
        console.log(data);
      });
    }, 'json');
</script>

app.js file

app.post('/page', function (req, res, next) {
  calling.aFunction();
  res.write('A message!');
});

Are these all the parts that I need and what needs to be edited to get this functionality to work?

Yeah I've tried it and received the error Uncaught ReferenceError: install is not defined — Web Hopeful
– Web Hopeful, Commented Nov 26, 2014 at 20:28
That is beacuse your onclick attribute in the button element has some method install() listed you don't seem to need this since you assign a click event handler using jQuery — Farmer Joe
– Farmer Joe, Commented Nov 26, 2014 at 20:30
Removing the install() method/function doesn't seem to fix the issue. The error is gone now but not getting any output or anything. — Web Hopeful
– Web Hopeful, Commented Nov 26, 2014 at 20:41
I don't know what issue you are reffering to, you only asked if this is how you do it. Do you have an error that should be included? Have you checked your network monitor to see if the POST method is completing? — Farmer Joe
– Farmer Joe, Commented Nov 26, 2014 at 20:42
Verify in your console the request goes thru - check your node console for errors. — tymeJV
– tymeJV, Commented Nov 26, 2014 at 20:44

takinola · Accepted Answer · 2014-11-27 06:25:16Z

7

index.js

<button class="btn btn-success">Install</button>

// Client Side Ajax Script
<script>
    $('button').click(function () {
        $.post('/page', {data: 'blah'}, function (data) {
        console.log(data);
      });
    }, 'json');
</script>

app.js

app.post('/page', function (req, res) {
    calling.aFunction();
    res.send('A message!');
});

You should see "A message!" in the browser console.

answered Nov 27, 2014 at 6:25

takinola

1,7731 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BoIde Over a year ago

And how do I get the 'blah' data in app.js?

takinola Over a year ago

Not sure what you mean by the "blah" data. That's just my way of showing the payload being sent to the post destination

BoIde Over a year ago

Sorry, I had to be more specific in my question: If I would like to also pass back data from index.js to the backend (app.js) with the $.post method how would I do that? Isn't that {data: 'blah'} ? And in app.post(... how would I read it, from req?

takinola Over a year ago

req.body.data would be "blah"

takinola Over a year ago

Btw, my last comment assumes you are using express-bodyparser to process POST data

Collectives™ on Stack Overflow

Simple button click example with Ajax and Node.js?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related