將數據從后端（nodejs）傳遞到前端 javascript

Question

我的數據庫（MongoDB）中有數據，我正在從數據庫中查找數據並將其保存到數組中。 當單擊頁面上的按鈕時，我想將該數據發送到我的 JavaScript 文件並使用 DOM 在頁面上顯示它。

頁面加載時我正在查找數據表單數據庫：

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.render('home');
    });
});

在我的另一個 JavaScript 文件中，我希望這個函數從 DB 獲取數據並做我想做的任何事情。

function randomIpsum(text) {
    text.value = 'text from database'; // text is textarea where I want to show text
}

Answer 1

您需要使用參數進行渲染。

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.render('home', { arr: ipsumTextArray });
    });
});

在前端（視圖）：

var arr= {{ arr }}

function randomIpsum(text) {
    //text.value = 'text from database'; // text is textarea where I want to show text
    text.value = arr[0]
}

或者

您可以從 nodejs 發送純文本。

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.send(ipsumTextArray);
    });
});

您可以在前端使用 jQuery 獲取數據。

<button id="btn">Get Data</button>

$("#btn").on("click", function(){
    $.get("/", function(data){
        randomIpsum(text, data)
    })
})

function randomIpsum(text, data) {
    //text.value = 'text from database'; // text is textarea where I want to show text
    text.value = data
}