Node.js 根据AJAX请求更新EJS变量

我正在使用Node.js、Express和EJS作为模板引擎构建一个定制的Shopify订单管理应用程序。我想让页面显示来自Shopify API的更新JSON数据，而不刷新页面，例如新订单、订单数量等

我已设法使用AJAX请求，该请求将GET请求发送到：

app.get('/shopifycall', function(req, res) {
    res.send(jsonOrderCount);
});

GET请求返回JSON数据。我不确定如何更新在初始API请求/页面呈现时设置的present.ejs变量

app.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

//View Engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Set Static Path
app.use(express.static(path.join(__dirname, '/public')));

var requestLoop = setInterval(function () {

var request = require("request");

  var options_orders = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };

  var options_order_count = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders/count.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };


  request(options_orders, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderData = JSON.parse(body);
    console.log(body);
  });

  request(options_order_count, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderCount = JSON.parse(body);
    console.log(body);
  });

}, 8000);


app.get('/shopifycall', function (req, res) {
  res.send(jsonOrderCount);
});

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => {
  console.log('Starting MOS2...');
  console.log('Loaded on port 3000');
});

window.onload = function () {
    init();
};


function init() {
// Run AJAX JSON Call
setTimeout(getJSON, 9000);
}

// Shopifycall - AJAX

function getJSON() {
    $.ajax({
        type: 'GET',
        url: 'shopifycall',
        dataType: 'json'
    })
    .done(function(data){
        console.log('GET Response:', JSON.stringify(data, "", 2));
        console.log(data);

    })
    .fail(function(jqXHR, textStatus, err){
        console.log("AJAX ERROR", textStatus);
    });

    setTimeout(getJSON, 9000);
}

    <div class="infoSection">
        <h1 class="infoTitle" id="count">Current Orders: <%= jsonOrderCount.count %></h1>
        <h1 class="infoTitle">Time: <span id="time"></span></h1>
    </div>
    <div class="sectionMark"></div>
    <div class="orders">
        <div class="filter">
            <div class="orderFilter">
                <span><i class="fas fa-filter"></i></span>
                <span class="custom-dropdown big">
                    <select>
                        <option>Filter Orders</option>
                        <option>Flagged Orders</option>
                        <option>Unsent Needle Sheet</option>
                        <option>Sent Needle Sheet</option>
                        <option>Accepted</option>
                        <option>Rejected</option>
                        <option>Awaiting</option>
                        <option>Past Week</option>
                        <option>Past Month</option>
                    </select>
                </span>
            </div>
        </div>



            <% jsonOrderData.orders.forEach(function(item) { %>

                <div class="order itm<%= item.number %>">
                    <div class="orderDetail">
                        <strong>Order #: <%= item.order_number %></strong>
                    </div>
                    <div class="os"> Order Status: <%= item.financial_status %></div>
                    <div class="ns"> Needle Sheet:
                                            </div>
                    <div class="as"> Acception Status:</div>

                    <div class="btn upload" id="<%= item.number %>">
                        <div class="orderBtns">
                            <i class="fas fa-file-upload"></i>
                        </div>
                    </div>
                    <div class="btn send">
                        <div class="orderBtns">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                    </div>
                    <div class="btn info">
                        <div class="orderBtns">
                            <i class="fas fa-info-circle"></i>
                        </div>
                    </div>
                    <div class="btn flag">
                        <div class="orderBtns">
                            <i class="fas fa-flag"></i>
                        </div>
                    </div>
                    <div class="btn close">
                        <div class="orderBtns">
                            <i class="far fa-times-circle" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>

                <div class="fileUpload up<%= item.number %>" id="m<%= item.number %>">
                    <div class="fileUploadContent">
                        <h2>Customer: <%= item.email %></h2>
                        <div class="uploadFile">
                            <span>Upload File ></span>
                        </div>
                        <div class="optionalMessage">
                            <span>Optional Message:</span>
                            <textarea class="customTextArea"></textarea>
                        </div>
                        <div class="modalOptions">
                            <div class="mButton ok"><span>Ok</span></div>
                            <div class="mButton cancel"><span>Cancel</span></div>
                        </div>
                    </div>
                </div>

            <% }); %>

ajax.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

//View Engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Set Static Path
app.use(express.static(path.join(__dirname, '/public')));

var requestLoop = setInterval(function () {

var request = require("request");

  var options_orders = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };

  var options_order_count = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders/count.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };


  request(options_orders, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderData = JSON.parse(body);
    console.log(body);
  });

  request(options_order_count, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderCount = JSON.parse(body);
    console.log(body);
  });

}, 8000);


app.get('/shopifycall', function (req, res) {
  res.send(jsonOrderCount);
});

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => {
  console.log('Starting MOS2...');
  console.log('Loaded on port 3000');
});

window.onload = function () {
    init();
};


function init() {
// Run AJAX JSON Call
setTimeout(getJSON, 9000);
}

// Shopifycall - AJAX

function getJSON() {
    $.ajax({
        type: 'GET',
        url: 'shopifycall',
        dataType: 'json'
    })
    .done(function(data){
        console.log('GET Response:', JSON.stringify(data, "", 2));
        console.log(data);

    })
    .fail(function(jqXHR, textStatus, err){
        console.log("AJAX ERROR", textStatus);
    });

    setTimeout(getJSON, 9000);
}

    <div class="infoSection">
        <h1 class="infoTitle" id="count">Current Orders: <%= jsonOrderCount.count %></h1>
        <h1 class="infoTitle">Time: <span id="time"></span></h1>
    </div>
    <div class="sectionMark"></div>
    <div class="orders">
        <div class="filter">
            <div class="orderFilter">
                <span><i class="fas fa-filter"></i></span>
                <span class="custom-dropdown big">
                    <select>
                        <option>Filter Orders</option>
                        <option>Flagged Orders</option>
                        <option>Unsent Needle Sheet</option>
                        <option>Sent Needle Sheet</option>
                        <option>Accepted</option>
                        <option>Rejected</option>
                        <option>Awaiting</option>
                        <option>Past Week</option>
                        <option>Past Month</option>
                    </select>
                </span>
            </div>
        </div>



            <% jsonOrderData.orders.forEach(function(item) { %>

                <div class="order itm<%= item.number %>">
                    <div class="orderDetail">
                        <strong>Order #: <%= item.order_number %></strong>
                    </div>
                    <div class="os"> Order Status: <%= item.financial_status %></div>
                    <div class="ns"> Needle Sheet:
                                            </div>
                    <div class="as"> Acception Status:</div>

                    <div class="btn upload" id="<%= item.number %>">
                        <div class="orderBtns">
                            <i class="fas fa-file-upload"></i>
                        </div>
                    </div>
                    <div class="btn send">
                        <div class="orderBtns">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                    </div>
                    <div class="btn info">
                        <div class="orderBtns">
                            <i class="fas fa-info-circle"></i>
                        </div>
                    </div>
                    <div class="btn flag">
                        <div class="orderBtns">
                            <i class="fas fa-flag"></i>
                        </div>
                    </div>
                    <div class="btn close">
                        <div class="orderBtns">
                            <i class="far fa-times-circle" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>

                <div class="fileUpload up<%= item.number %>" id="m<%= item.number %>">
                    <div class="fileUploadContent">
                        <h2>Customer: <%= item.email %></h2>
                        <div class="uploadFile">
                            <span>Upload File ></span>
                        </div>
                        <div class="optionalMessage">
                            <span>Optional Message:</span>
                            <textarea class="customTextArea"></textarea>
                        </div>
                        <div class="modalOptions">
                            <div class="mButton ok"><span>Ok</span></div>
                            <div class="mButton cancel"><span>Cancel</span></div>
                        </div>
                    </div>
                </div>

            <% }); %>

index.ejs

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

//View Engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Set Static Path
app.use(express.static(path.join(__dirname, '/public')));

var requestLoop = setInterval(function () {

var request = require("request");

  var options_orders = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };

  var options_order_count = {
    method: 'GET',
    url: 'https://macwear-clothing-embroidery.myshopify.com/admin/orders/count.json',
    headers: {
      'Postman-Token': '',
      'Cache-Control': 'no-cache',
      Authorization: ''
    }
  };


  request(options_orders, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderData = JSON.parse(body);
    console.log(body);
  });

  request(options_order_count, function (error, response, body) {
    if (error) throw new Error(error);
    jsonOrderCount = JSON.parse(body);
    console.log(body);
  });

}, 8000);


app.get('/shopifycall', function (req, res) {
  res.send(jsonOrderCount);
});

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => {
  console.log('Starting MOS2...');
  console.log('Loaded on port 3000');
});

window.onload = function () {
    init();
};


function init() {
// Run AJAX JSON Call
setTimeout(getJSON, 9000);
}

// Shopifycall - AJAX

function getJSON() {
    $.ajax({
        type: 'GET',
        url: 'shopifycall',
        dataType: 'json'
    })
    .done(function(data){
        console.log('GET Response:', JSON.stringify(data, "", 2));
        console.log(data);

    })
    .fail(function(jqXHR, textStatus, err){
        console.log("AJAX ERROR", textStatus);
    });

    setTimeout(getJSON, 9000);
}

    <div class="infoSection">
        <h1 class="infoTitle" id="count">Current Orders: <%= jsonOrderCount.count %></h1>
        <h1 class="infoTitle">Time: <span id="time"></span></h1>
    </div>
    <div class="sectionMark"></div>
    <div class="orders">
        <div class="filter">
            <div class="orderFilter">
                <span><i class="fas fa-filter"></i></span>
                <span class="custom-dropdown big">
                    <select>
                        <option>Filter Orders</option>
                        <option>Flagged Orders</option>
                        <option>Unsent Needle Sheet</option>
                        <option>Sent Needle Sheet</option>
                        <option>Accepted</option>
                        <option>Rejected</option>
                        <option>Awaiting</option>
                        <option>Past Week</option>
                        <option>Past Month</option>
                    </select>
                </span>
            </div>
        </div>



            <% jsonOrderData.orders.forEach(function(item) { %>

                <div class="order itm<%= item.number %>">
                    <div class="orderDetail">
                        <strong>Order #: <%= item.order_number %></strong>
                    </div>
                    <div class="os"> Order Status: <%= item.financial_status %></div>
                    <div class="ns"> Needle Sheet:
                                            </div>
                    <div class="as"> Acception Status:</div>

                    <div class="btn upload" id="<%= item.number %>">
                        <div class="orderBtns">
                            <i class="fas fa-file-upload"></i>
                        </div>
                    </div>
                    <div class="btn send">
                        <div class="orderBtns">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                    </div>
                    <div class="btn info">
                        <div class="orderBtns">
                            <i class="fas fa-info-circle"></i>
                        </div>
                    </div>
                    <div class="btn flag">
                        <div class="orderBtns">
                            <i class="fas fa-flag"></i>
                        </div>
                    </div>
                    <div class="btn close">
                        <div class="orderBtns">
                            <i class="far fa-times-circle" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>

                <div class="fileUpload up<%= item.number %>" id="m<%= item.number %>">
                    <div class="fileUploadContent">
                        <h2>Customer: <%= item.email %></h2>
                        <div class="uploadFile">
                            <span>Upload File ></span>
                        </div>
                        <div class="optionalMessage">
                            <span>Optional Message:</span>
                            <textarea class="customTextArea"></textarea>
                        </div>
                        <div class="modalOptions">
                            <div class="mButton ok"><span>Ok</span></div>
                            <div class="mButton cancel"><span>Cancel</span></div>
                        </div>
                    </div>
                </div>

            <% }); %>

当前订单：
时间：
过滤顺序
标记订单
未发送针片
送针纸
认可的
拒绝
等待
上周
上个月
订单：
订单状态：
针片：
接受状态：
客户：
上传文件>
可选消息：
好啊
取消

您是否知道在客户端找不到您的EJS模板。很久以前，它被转换成HTML并发送到浏览器。因此，客户端无法在客户端的该点执行任何EJB

因此，您的选择如下：

重新加载页面，让服务器重新加载整个页面，然后浏览器将显示重新加载的页面

更改服务器上的Ajax调用以返回新呈现的页面正文（整个页面正文），然后让客户端代码用Ajax调用返回的HTML替换当前页面的正文

执行客户端渲染而不是服务器端渲染。然后，您可以将EJS模板发送到客户机，然后只要它从服务器获得新的JSON，它就可以重新提交EJS模板并将其插入当前页面

在没有EJS的情况下手动将JSON数据插入页面。从服务器获取JSON后，处理它并手动将其输入页面中的正确位置