0

完全に機能し、フォームを更新し続けるアプリがありますが、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;

データ ハンドラー: 

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

1 に答える 1

1

Ajax を使用して、フォームを最新の状態に保つための一般的な方法を次に示します。

  1. クライアントからサーバーへの Ajax 呼び出しを行い、更新されたデータがあるかどうかをサーバーに尋ねます。
  2. サーバーがデータを更新した場合は、そのデータを (おそらく JSON 形式で) 返します。
  3. クライアントがデータを受信すると、DOM 操作関数を使用して、変更されたデータを既存のフォームに直接挿入できます (リロードなし)。
  4. その後、クライアントはタイマーを設定し、一定の時間間隔でこのプロセスを繰り返すことができます。

webSockets を使用して、フォームを最新の状態に保つための一般的なスキームを次に示します。

  1. ページ読み込みの一部として、ページはサーバーへの webSocket 接続を作成します。
  2. サーバーでは、フォームの新しいデータが利用可能になるたびに、サーバーはそのデータを接続されたクライアントに webSocket 経由で送信できます。
  3. クライアントが webSocket 経由でデータを受信すると (上記のオプションと同じ JSON)、DOM 操作関数を使用して、変更されたデータを既存のフォームに直接挿入できます (リロードなし)。

クライアント/サーバーは webSocket で継続的に接続されるため、Ajax オプションのようにタイマーや継続的なポーリングは必要ありません。

フォームの HTML を表示しないため、フォームの操作方法について具体的にアドバイスすることはできませんが、例を次に示します。

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

// put new value into input field
document.getElementById("someField").value = myNewValue;
于 2016-05-25T15:57:08.230 に答える