Come usare AJAX in Node.js

Blog

Come usare AJAX in Node.js

introduzione



In questo post vediamo come usare Ajax in Node.js

Imposta la cartella



Per creare una cartella, apri il prompt dei comandi e digita cmd mkdir seguito dal nome della cartella

#mkdir ajax



Passa alla cartella digitando il cmd cd seguito dal nome della cartella

Reagisci ai modelli di siti Web js

#cd ajax

Nodo di configurazione nella cartella

Sulla console, digita il comando seguente

#npm init -y

Questo creerà un pacchetto.json file, il che significa che il nodo è inizializzato nella cartella.

il pacchetto.json sarà simile a questo

{ 'name': 'ajax', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1' }, 'keywords': [], 'author': '', 'license': 'ISC' } }

**Installa pacchetti **

Per compilare l'applicazione è necessario installare i pacchetti.

Per installare i pacchetti dobbiamo digitare installazione npm seguito dal nome del pacchetto.

#npm install body-parser express ejs mongoose jquery

Dopo aver installato i pacchetti il pacchetto.json il file sarà simile a questo.

{ 'name': 'ajax', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1' }, 'keywords': [], 'author': '', 'license': 'ISC', 'dependencies': { 'body-parser': '^1.19.0', 'ejs': '^3.0.1', 'express': '^4.17.1', 'jquery': '^3.4.1', 'mongoose': '^5.9.2' } }

Aggiungi cartelle

Dobbiamo aggiungere 3 nuove cartelle.

  • Modelli
  • itinerari
  • visualizzazioni
  • pubblico

Modelli

Aggiungi un nuovo file in questa cartella e chiamalo task.js

Nel file task.js, aggiungi il codice seguente.

  • task.js
var mongoose = require('mongoose'); var taskSchema = new mongoose.Schema({ task:{ type:String } }); var taskModel = module.exports = mongoose.model('task',taskSchema); module.exports.addTask = (task,cb)=>{ task.save((err,taskData)=>{ if(err){ cb(err,null); }else{ cb(null,taskData); } }); } module.exports.getTask = (cb)=>{ taskModel.find((err,taskData)=>{ if(err){ cb(err,null); }else{ cb(null,taskData); } }); } module.exports.removeTask = (id,cb)=>{ taskModel.deleteOne({'_id':id},(err,taskData)=>{ if(err){ cb(err,null); }else{ cb(null,taskData); } }); }

Itinerari

Aggiungi il nuovo file nella cartella e chiamalo taskroute.js

In taskroute.js, aggiungi il codice sotto

  • taskroute.js
var express = require('express'); var taskModel = require('../models/task'); var router = express.Router(); router.get('/home',(req,res)=>{ res.render('demo'); }); router.post('/addtask',(req,res)=>{ var taskk = new taskModel({ task:req.body.task }); taskModel.addTask(taskk,(err,taskData)=>{ if(err){ res.json({msg:'error'}); }else{ res.json({msg:'success'}); } }); }); router.get('/gettask',(req,res)=>{ taskModel.getTask((err,taskData)=>{ if(err){ res.json({msg:'error'}); }else{ res.json({msg:'success',data:taskData}); } }); }); router.delete('/removetask',(req,res)=>{ taskModel.removeTask(req.body.id,(err,taskData)=>{ if(err){ res.json({msg:'error'}); }else{ res.json({msg:'success'}); } }); }); module.exports = router;

**Visualizzazioni **

Aggiungi un nuovo file e chiamalo demo.ejs

  • demo.ejs
Document
ToDo List
Enter The Task Add Task
s.no Task delete

Pubblico

Aggiungi un nuovo file e chiamalo data.js.
In data.js aggiungi il codice seguente.
Questo conterrà il nostro codice jquery ajax.

  • data.js
$(document).ready(function(){ alert('application started'); getdata(); $('.addbtn').click(function(){ var task = $('#task').val(); $.ajax({ url:'/task/addtask', method:'post', dataType:'json', data:{'task':task}, success:function(response){ if(response.msg=='success'){ alert('task added successfully'); getdata(); $('#task').val('') }else{ alert('some error occurred try again'); } }, error:function(response){ alert('server error occured') } }); }); $(document).on('click','button.del',function(){ var id = $(this).parent().find('button.del').val(); $.ajax({ url:'/task/removetask', method:'delete', dataType:'json', data:{'id':id}, success:function(response){ if(response.msg=='success'){ alert('data deleted'); getdata(); }else{ alert('data not get deleted'); } }, error:function(response){ alert('server error') } }); }); function getdata(){ $.ajax({ url:'/task/gettask', method:'get', dataType:'json', success:function(response){ if(response.msg=='success'){ $('tr.taskrow').remove() if(response.data==undefined || response.data==null || response.data==''){ $('.tblData').hide(); }else{ $('.tblData').show(); $.each(response.data,function(index,data){ var url = url+data._id; index+=1; $('tbody').append(''+ index +''+data.task+''+'delete'+''); }); } } }, error:function(response){ alert('server error'); } }); } });

Punto d'entrata

Aggiungi un nuovo file nella cartella del progetto e chiamalo app.js.

Questo sarà il punto di ingresso della nostra applicazione.

  • app.js
var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var path = require('path'); var $ = require('jquery'); //connect to db mongoose.connect('mongodb://localhost:27017/ajaxdemo',{useNewUrlParser:true}) .then(()=>console.log('connected to db')) .catch((err)=>console.log('connection error',err)) //init app var app = express(); //set the template engine app.set('view engine','ejs'); //fetch data from the request app.use(bodyParser.urlencoded({extended:false})); //set the path of the jquery file to be used from the node_module jquery package app.use('/jquery',express.static(path.join(__dirname+'/node_modules/jquery/dist/'))); //set static folder(public) path app.use(express.static(path.join(__dirname+'/public'))); //default page load app.get('/',(req,res)=>{ res.redirect('/task/home'); }); //routes app.use('/task',require('./routes/taskroute')); //assign port var port = process.env.PORT || 3000; app.listen(port,()=>console.log('server run at port '+port));

Ora apri il file package.json e in script Inserisci inizio: nodo app.js

Il pacchetto.json assomiglierà a questo.

{ 'name': 'ajax', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1', 'start': 'node app.js' }, 'keywords': [], 'author': '', 'license': 'ISC', 'dependencies': { 'body-parser': '^1.19.0', 'ejs': '^3.0.1', 'express': '^4.17.1', 'jquery': '^3.4.1', 'mongoose': '^5.9.2' } }

Scarica il codice da qui

Guarda il video tutorial

Grazie per aver letto!

#node-js #mongodb #ajax #tutorial