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'+' 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
Grazie per aver letto!
#node-js #mongodb #ajax #tutorial