Question

我有一个完美的应用程序，并保持表单更新，但只有我重新加载DOM。是否可以使用新输入或用户修改的数据更新表单，而无需在有人单击提交按钮时重新加载它？

服务器代码：

(?<=Execution Return Code:)\s*-?\d+

数据处理程序：

"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;

EJS文件：

 "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;

Answer 1

使用Ajax，这是保持表单最新的一般方案：

从客户端到服务器进行Ajax调用，询问服务器是否有任何更新的数据。
如果服务器已更新数据，则返回该数据（可能采用JSON格式）。
当客户端收到数据时，它可以使用DOM操作函数将更改的数据直接插入到现有表单中（无需重新加载）。
然后，客户端可以设置计时器，并以固定的时间间隔重复此过程。

使用webSockets，这是保持表单最新的一般方案：

作为页面加载的一部分，该页面将创建与服务器的webSocket连接。
在服务器上，只要表单的新数据可用，服务器就可以通过webSocket将该数据发送到连接的客户端。
当客户端通过webSocket接收数据（与上述选项相同的JSON）时，它可以使用DOM操作函数将更改的数据直接插入到现有表单中（无需重新加载）。

因为客户端/服务器持续与webSocket连接，所以不需要像Ajax选项那样的定时器或连续轮询。

您不会显示您的表单HTML，因此我们无法就如何进行表单操作提出具体建议，但这是一个示例：

<form>
    <input id="someField">
</form>

// put new value into input field
document.getElementById("someField").value = myNewValue;

如何在不重新加载DOM的情况下保持表单更新？

1 个答案: