0
У меня есть приложение, которое отлично работает и обновляет форму, но только если я перезагружу DOM. Возможно ли обновить форму с новыми входными или измененными пользователем данными без перезагрузки, когда кто-то нажимает кнопку отправки?Как сохранить форму без обновления DOM?
код сервера:
"use strict";
const DATA_HANDLER = require('./node/DataHandler');
class app {
constructor() {
this.ejsData = null;
this.nedbData = new DATA_HANDLER();
this.nedbData.loadData((docs) => {
this.ejsData = docs;
});
this.loadServer();
}
loadServer() {
const HTTP = require('http'),
EJS = require('ejs'),
PORT = 1337,
SERVER = HTTP.createServer((req, res) => {
let httpHandler = (err, str, contentType) => {
if (err) {
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('An error has occurred: ' + err.message);
} else if (contentType.indexOf('image') >= 0) {
res.writeHead(200, {'Content-Type': contentType});
res.end(str, 'binary');
} else if (contentType.indexOf('html') >= 0) {
res.writeHead(200, { 'Content-Type': contentType });
res.end(EJS.render(str, {
data: this.ejsData,
filename: 'index.ejs' }));
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(str, 'utf-8');
}
};
if (req.method == 'POST') {
if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
this.loadData(req, res, 0);
} else if (req.headers['x-requested-load'] === 'XMLHttpRequest1') {
this.loadData(req, res, 1);
} else {
console.log("[405] " + req.method + " to " + req.url);
res.writeHead(405, "Method not supported", { 'Content-Type': 'text/html' });
res.end('<html><head><title>405 - Method not supported</title></head><body><h1>Method not supported.</h1></body></html>');
}
} else if (req.url.indexOf('/javascripts/') >= 0) {
this.render(req.url.slice(1), 'application/ecmascript', httpHandler, 'utf-8');
} else if (req.url.indexOf('/css/') >= 0) {
this.render(req.url.slice(1), 'text/css', httpHandler, 'utf-8');
} else if (req.url.indexOf('/images/') >= 0) {
this.render(req.url.slice(1), 'image/jpeg', httpHandler, 'binary');
} else {
this.render('public/views/index.ejs', 'text/html', httpHandler, 'utf-8');
}
}).listen(PORT, _ => console.log('-= Work Order Server Listening at http://127.0.0.1:' + PORT + ' =-'));
}
render(path, contentType, callback, encoding) {
const FS = require('fs');
FS.readFile(__dirname + '/' + path, encoding ? encoding : 'utf-8', (err, str) => { // ternary
callback(err, str, contentType);
});
}
loadData(req, res, whichAjax) {
if (whichAjax === 1) {
const FORMIDABLE = require('formidable');
let formData = {};
new FORMIDABLE.IncomingForm().parse(req).on('field', (field, name) => {
formData[field] = name;
}).on('error', (err) => {
next(err);
}).on('end',() => {
this.nedbData.queryData(formData);
});
}
this.nedbData.loadData((docs) => {
let jsonDocs = JSON.stringify(docs);
res.writeHead(200, {'content-type': 'application/json'});
res.end(jsonDocs);
this.ejsData = docs;
});
}
}
module.exports = app;
Data Handler:
"use strict";
const DATASTORE = require('nedb');
let DB = new DATASTORE({ filename: './data/workorder_db.json', autoload: true });
this.data = [];
class DataHandler {
constructor() {
DB.loadDatabase();
}
loadData(callback) {
DB.find({}, (err, docs) => {
if (docs.length != null) {
callback(docs);
}
});
}
updateData(data) {
DB.update({ _id: data.id }, { building: data.building
, roomNumber: data.roomNumber
, submitter: data.submitter
, problemDesc: data.problemDesc
, assigned: data.assigned
, completed: data.completed
, status: data.status
, date: data.date
}, { upsert: true,
returnUpdatedDocs: true });
}
addData(data) {
delete data.id; // remove id field out of JSON parameter
DB.insert(data);
}
queryData(data) {
DB.findOne({ _id: data.id }, (err, docs) => {
if (docs == null) {
this.addData(data);
} else {
this.updateData(data);
}
});
}
}
module.exports = DataHandler;
EJS Файл:
<div class="row">
<div class="small-12 columns">
<h4>Current Work:</h4>
<table>
<% if (data.length > 0) { %>
<tr>
<td><strong>Date</strong></td>
<td><strong>Building</strong></td>
<td><strong>Room #</strong></td>
<td><strong>Challenge</strong></td>
<td><strong>Assignment</strong></td>
<td><strong>Status</strong></td>
</tr>
<% for (let i = 0; i < data.length; i++) { %>
<tr>
<td><%= data[i].date %></td>
<td><%= data[i].building %></td>
<td><%= data[i].roomNumber %></td>
<td><%= data[i].problemDesc %></td>
<td><%= data[i].assigned %></td>
<td><%= data[i].status %></td>
</tr>
<% } %>
<% } %>
</table>
</div>
</div>
Все еще борется с этим. Похоже, что это связано с тем, как NeDB возвращает данные даже после перезагрузки базы данных. – BackPacker777