NodeJS/Express – POST/GET data to/from MongoDB using Mongoose – Ajax JQuery + Bootstrap form example

In the tutorial, we show how to POST/GET form data to/from MongoDB in NodeJS/Express application using Mongoose with Ajax JQuery & Bootstrap view.

Related posts:
Crud RestAPIs with NodeJS/Express, MongoDB using Mongoose
Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view

Goal

Technologies
– NodeJS/Express
– Mongoose
– MongoDB
– JQuery Ajax
– Bootstrap

We create a NodeJS/Express project as below structure:

Run above project then makes POST/GET requests, results:

-> Bootstrap view:

NodeJS-Express-Post-Get-data-to-MongoDB-using-Moongoose-Ajax-JQuery-Bootstrap-view-results

-> MongoDB’s collections:

NodeJS-Express-Post-Get-data-to-MongoDB-using-Moongoose-Ajax-JQuery-Bootstrap-view-MongoDB-all-records

Practice

Setting up NodeJS/Express project

Create a folder: ‘NodeJS-Express-Ajax-JQuery-Bootstrap-MongoDB’:

Then init NodeJS project, see prompts:

-> Install Express, Body-Parser, Mongoose:

-> see package.json file:

Frontend
Create Bootstrap views

./view/index.html file:

./views/404.html file:

Implement Ajax JQuery to Post/Get data

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

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

Backend
Create Mongoose model

./app/models/user.model.js file:

Configure MongoDB connection

./app/config/mongodb.config.js file:

Create Express Routes

./app/routes/user.route.js file:

Implement Controllers

./app/controllers/user.controller.js file:

Implement App.js

./app.js file:

Run & Check results

Start NodeJS server:

-> Logs:

-> POST/GET requests:

NodeJS-Express-Post-Get-data-to-MongoDB-using-Moongoose-Ajax-JQuery-Bootstrap-view-requests

Sourcecode

To run below sourcecode, follow below guides:

Sourcecode:

NodeJS-Express-Ajax-JQuery-Bootstrap-MongoDB

By grokonez | May 6, 2018.



Related Posts


1 thought on “NodeJS/Express – POST/GET data to/from MongoDB using Mongoose – Ajax JQuery + Bootstrap form example”

Got Something To Say:

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

*