Introduction

In this blog, we see how to use Ajax in Node.
Project Structure
|-------------- models
| |-------------- task.js
|
|-------------- public
| |-------------- data.js
|
|--------------- routes
| |-------------- taskroute.js
|
|--------------- views
| |-------------- demo.ejs
|
|--------------- app.js
Setup The Folder
To create a folder, open the command prompt and type cmd mkdir followed by the folder name
# mkdir ajax
Change to the folder by typing the cmd cd followed by the folder name
# cd ajax
Setup Node In Folder
On the console, type the below command
# npm init -y
This will create a package.json file, Which means that node is initialised in the folder.
the package.json will look like this
  1. {
  2. "name": "ajax",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC"
  12. }
  13. }
Install Packages
To build application we need to install packages.
To install packages we have to type npm install followed by the package name.
# npm install body-parser express ejs mongoose jquery
After installing packages the package.json file will look like this.
  1. {
  2. "name": "ajax",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC",
  12. "dependencies": {
  13. "body-parser": "^1.19.0",
  14. "ejs": "^3.0.1",
  15. "express": "^4.17.1",
  16. "jquery": "^3.4.1",
  17. "mongoose": "^5.9.2"
  18. }
  19. }
Add Folders
We have to add 4 new folders.
  • models
  • routes
  • views
  • public
Models
Add new file in this folder and name it task.js
In the task.js file, add the below code.
  • task.js
  1. var mongoose = require('mongoose');
  3. var taskSchema = new mongoose.Schema({
  4. task:{
  5. type:String
  6. }
  7. });
  9. var taskModel = module.exports = mongoose.model('task',taskSchema);
  11. module.exports.addTask = (task,cb)=>{
  12. task.save((err,taskData)=>{
  13. if(err){
  14. cb(err,null);
  15. }else{
  16. cb(null,taskData);
  17. }
  18. });
  19. }
  21. module.exports.getTask = (cb)=>{
  22. taskModel.find((err,taskData)=>{
  23. if(err){
  24. cb(err,null);
  25. }else{
  26. cb(null,taskData);
  27. }
  28. });
  29. }
  31. module.exports.removeTask = (id,cb)=>{
  32. taskModel.deleteOne({'_id':id},(err,taskData)=>{
  33. if(err){
  34. cb(err,null);
  35. }else{
  36. cb(null,taskData);
  37. }
  38. });
  39. }
Routes
Add the new file in the folder and name it taskroute.js
In taskroute.js, add below code
  • taskroute.js
  1. var express = require('express');
  2. var taskModel = require('../models/task');
  4. var router = express.Router();
  6. router.get('/home',(req,res)=>{
  7. res.render('demo');
  8. });
  11. router.post('/addtask',(req,res)=>{
  12. var taskk = new taskModel({
  13. task:req.body.task
  14. });
  15. taskModel.addTask(taskk,(err,taskData)=>{
  16. if(err){
  17. res.json({msg:'error'});
  18. }else{
  19. res.json({msg:'success'});
  20. }
  21. });
  22. });
  24. router.get('/gettask',(req,res)=>{
  25. taskModel.getTask((err,taskData)=>{
  26. if(err){
  27. res.json({msg:'error'});
  28. }else{
  29. res.json({msg:'success',data:taskData});
  30. }
  31. });
  32. });
  34. router.delete('/removetask',(req,res)=>{
  35. taskModel.removeTask(req.body.id,(err,taskData)=>{
  36. if(err){
  37. res.json({msg:'error'});
  38. }else{
  39. res.json({msg:'success'});
  40. }
  41. });
  42. });
  44. module.exports = router;
Views
Add new file and name it demo.ejs
  • demo.ejs
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  8. <script src="/jquery/jquery.js"></script>
  9. </head>
  10. <body>
  11. <div class="container" style="margin-top: 50px;">
  12. <div class="nav justify-content-center">
  13. <div class="card">
  14. <h5 class="card-header text-center">ToDo List</h5>
  15. <div class="card-body">
  16. <div class="form-group text-center">
  17. <label for="Task">Enter The Task</label>
  18. <input type="text" class="form-control" name="Task" id="task" required>
  19. </div>
  20. <div class="text-center"><button class="btn btn-lg btn-success addbtn">Add Task</button></div>
  21. </div>
  22. </div>
  23. </div><br>
  24. <div class="nav justify-content-center tblData" style="overflow-y:scroll; height: 200px;">
  26. <table class="table table-hover">
  27. <thead>
  28. <tr>
  29. <th>
  30. s.no
  31. </th>
  32. <th>
  33. Task
  34. </th>
  35. <th>
  36. delete
  37. </th>
  38. </tr>
  39. </thead>
  40. <tbody >
  41. </tbody>
  42. </table>
  43. </div>
  44. </div>
  45. <script src="/data.js"></script>
  46. </body>
  47. </html>
Public
Add new file and name it data.js.
In data.js add the below code.
This will contain our jquery ajax code.
  • data.js
  1. $(document).ready(function(){
  2. alert('application started');
  4. getdata();
  6. $('.addbtn').click(function(){
  7. var task = $("#task").val();
  8. $.ajax({
  9. url:'/task/addtask',
  10. method:'post',
  11. dataType:'json',
  12. data:{'task':task},
  13. success:function(response){
  14. if(response.msg=='success'){
  15. alert('task added successfully');
  16. getdata();
  17. $('#task').val('')
  18. }else{
  19. alert('some error occurred try again');
  20. }
  21. },
  22. error:function(response){
  23. alert('server error occured')
  24. }
  25. });
  26. });
  27. $(document).on('click','button.del',function(){
  28. var id = $(this).parent().find('button.del').val();
  29. $.ajax({
  30. url:'/task/removetask',
  31. method:'delete',
  32. dataType:'json',
  33. data:{'id':id},
  34. success:function(response){
  35. if(response.msg=='success'){
  36. alert('data deleted');
  37. getdata();
  38. }else{
  39. alert('data not get deleted');
  40. }
  41. },
  42. error:function(response){
  43. alert('server error')
  44. }
  45. });
  46. });
  47. function getdata(){
  48. $.ajax({
  49. url:'/task/gettask',
  50. method:'get',
  51. dataType:'json',
  52. success:function(response){
  53. if(response.msg=='success'){
  54. $('tr.taskrow').remove()
  55. if(response.data==undefined || response.data==null || response.data==''){
  56. $('.tblData').hide();
  57. }else{
  58. $('.tblData').show();
  59. $.each(response.data,function(index,data){
  60. var url = url+data._id;
  61. index+=1;
  62. $('tbody').append("<tr class='taskrow'><td>"+ index +"</td><td>"+data.task+"</td><td>"+"<button class='del' value='"+data._id+"'>delete</button>"+"</td></tr>");
  63. });
  64. }
  65. }
  66. },
  67. error:function(response){
  68. alert('server error');
  69. }
  70. });
  71. }
  72. });
Entry Point
Add a new file in the project folder and name it app.js.
This will be the entry point of our application.
  • app.js
  1. var express = require('express');
  2. var mongoose = require('mongoose');
  3. var bodyParser = require('body-parser');
  4. var path = require('path');
  5. var $ = require('jquery');
  7. //connect to db
  8. mongoose.connect('mongodb://localhost:27017/ajaxdemo',{useNewUrlParser:true})
  9. .then(()=>console.log('connected to db'))
  10. .catch((err)=>console.log('connection error',err))
  12. //init app
  13. var app = express();
  15. //set the template engine
  16. app.set('view engine','ejs');
  18. //fetch data from the request
  19. app.use(bodyParser.urlencoded({extended:false}));
  21. //set the path of the jquery file to be used from the node_module jquery package
  22. app.use('/jquery',express.static(path.join(__dirname+'/node_modules/jquery/dist/')));
  24. //set static folder(public) path
  25. app.use(express.static(path.join(__dirname+'/public')));
  27. //default page load
  28. app.get('/',(req,res)=>{
  29. res.redirect('/task/home');
  30. });
  32. //routes
  33. app.use('/task',require('./routes/taskroute'));
  35. //assign port
  36. var port = process.env.PORT || 3000;
  37. app.listen(port,()=>console.log('server run at port '+port));
Now open the package.json file and in "scripts" add "start" : "node app.js"
The package.json will look like this.
  1. {
  2. "name": "ajax",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1",
  8. "start": "node app.js"
  9. },
  10. "keywords": [],
  11. "author": "",
  12. "license": "ISC",
  13. "dependencies": {
  14. "body-parser": "^1.19.0",
  15. "ejs": "^3.0.1",
  16. "express": "^4.17.1",
  17. "jquery": "^3.4.1",
  18. "mongoose": "^5.9.2"
  19. }
  20. }
Download the code from here
Watch Video Tutorial