Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view example

Integrate-node.js-express-with-ajax-post-get-api

In the tutorial, we show how to integrate NodeJS/Express with JQuery Ajax POST/GET requests and Bootstrap view.

Related posts:
How to build NodeJS/Express Bootstrap views
NodeJS/Express – save form data to MySQL using Sequelize ORM – Ajax JQuery + Bootstrap view

Goal

We create a NodeJS/Express project as below structure:

Run above NodeJS/Express application then does POST/GET requests:

NodeJs-Express-JQuery-Ajax-Post-Get-with-Bootstrap-View

Practice

Setting up NodeJS/Express project

Create folder: nodejs-express-bootstrap and init nodejs application.

See prompts:

Now we have an package.json file in folder nodejs-express-jquery-ajax-bootstrap with content as below:

Installing Express

-> Check package.json file:

Implement Bootstrap views

./views/index.html file:

./views/404.html file:

Implement JQuery Ajax requests

– For JQuery Ajax POST request, we implement a ./public/js/postrequest.js file:

– For JQuery Ajax Get request, we implement a ./public/js/getrequest.js file:

Implement Express Routes

In main NodeJS app.js file, we implement Express routes:

Run & Check results

Run NodeJS application then makes requests:
->Server’s Logs:

NodeJs-Express-JQuery-Ajax-Post-Get-with-Bootstrap-View-request

NodeJs-Express-JQuery-Ajax-Post-Get-with-Bootstrap-View

Sourcecode

Nodejs-Express-JQuery-Ajax-Bootstrap

By grokonez | May 3, 2018.

Last updated on April 15, 2019.



Related Posts


5 thoughts on “Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view example”

  1. Could you please explain the routing i.e. “api/customers/save” and “api/customers/all”?
    If I try to change to change the route for post request to “api/customers/submit” in both the app.js file and postrequest.js file…it shows an error, what is the reason for this?

  2. Hello grokonez ,
    Thanks for the Good explanation on this interesting topic, unfortunately This program is not working for me.
    When I hit the SUBMIT button it is not showing the message “Post Successfully!”, but I am able to see the function “ajaxPost” in the browser inspect/debugmode, I tried to put a breakpoint and it is not reaching the breakpoint.
    It seems like the “ajaxPost” method is not firing when SUBMIT button is pressed.

    Please let me know if I am missing any.

    Thanks,
    Naga.

  3. Would it be hard to show an example of using handlebars (.hbs) template system? I get 404 errors trying to get it to read the post and get paths because it uses an app.js and an index.js. Putting your app.js code in mine doesn’t seem to work.

Got Something To Say:

Your email address will not be published. Required fields are marked *

*