So verwenden Sie AJAX in Node.js
Einführung
In diesem Beitrag sehen wir, wie man Ajax in Node.js verwendet
Den Ordner einrichten
Um einen Ordner zu erstellen, öffnen Sie die Eingabeaufforderung und geben Sie cmd . ein mkdir gefolgt vom Ordnernamen
#mkdir ajax
Wechseln Sie in den Ordner, indem Sie cmd . eingeben CD gefolgt vom Ordnernamen
pandas groupby Wert zählt
#cd ajax
Knoten im Ordner einrichten
Geben Sie in der Konsole den folgenden Befehl ein
#npm init -y
Dadurch wird ein Paket.json Datei, was bedeutet, dass der Knoten im Ordner initialisiert wird.
die package.json wird so aussehen
{ 'name': 'ajax', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1' }, 'keywords': [], 'author': '', 'license': 'ISC' } } **Pakete installieren **
Um eine Anwendung zu erstellen, müssen wir Pakete installieren.
Um Pakete zu installieren, müssen wir eingeben npm installieren gefolgt vom Paketnamen.
#npm install body-parser express ejs mungo jquery
Nach der Installation von Paketen Paket.json Datei wird so aussehen.
{ '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' } } Ordner hinzufügen
Wir müssen 3 neue Ordner hinzufügen.
- Modelle
- Routen
- Ansichten
- öffentlich
Modelle
Fügen Sie diesem Ordner eine neue Datei hinzu und benennen Sie sie task.js
Fügen Sie in der Datei task.js den folgenden Code hinzu.
- 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); } }); } Routen
Fügen Sie die neue Datei im Ordner hinzu und benennen Sie sie taskroute.js
Fügen Sie in taskroute.js den folgenden Code hinzu
- 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; **Ansichten **
Fügen Sie eine neue Datei hinzu und nennen Sie sie demo.ejs
- demo.ejs
Document ToDo List
Enter The Task Add Task
s.no Task delete
Öffentlich
Fügen Sie eine neue Datei hinzu und nennen Sie sie data.js.
Fügen Sie in data.js den folgenden Code hinzu.
Diese enthält unseren Jquery-Ajax-Code.
- 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'+' Einstiegspunkt
Fügen Sie eine neue Datei im Projektordner hinzu und benennen Sie sie app.js.
Dies wird der Einstiegspunkt unserer Anwendung sein.
- 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)); Öffnen Sie nun die Datei package.json und in Skripte hinzufügen start : Knoten app.js
Die Paket.json wird so aussehen.
{ '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' } } Laden Sie den Code herunter von Hier
Vielen Dank fürs Lesen!
#node-js #mongodb #ajax #tutorial