根据 AJAX 请求更新 EJS 变量

Question

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

我已经设法使用 AJAX 请求发送 GET 请求到：

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

GET 请求 returns JSON 数据。我不确定如何更新在初始 API request/page 渲染时设置的当前 .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');
});

ajax.js

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);
}

index.ejs

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

            <% }); %>

Answer 1

你明白吗，你的EJS模板在客户端找不到了。早就改成HTML发给浏览器了。因此，客户端此时无法在客户端执行任何 EJS。

那么，您的选择是：

重新加载页面并让您的服务器重新呈现整个页面，然后浏览器将显示重新呈现的页面。
将服务器上的 Ajax 调用更改为 return 新呈现的页面主体（整个页面主体），然后让客户端代码将当前页面的主体替换为 HTML return来自 Ajax 电话。
进行客户端渲染而不是服务器端渲染。然后，您可以将 EJS 模板发送到客户端，然后只要它从服务器获得新的 JSON，它就可以重新呈现 EJS 模板并将其插入当前页面。
手动插入JSON数据到没有EJS的页面。当您从服务器返回 JSON 时，对其进行处理并手动将其输入到页面中的正确位置。

根据 AJAX 请求更新 EJS 变量

Update EJS Variables on AJAX Request

ajax

ejs

node.js

shopify

express