發送數據到ExpressJS服務器呈現新視圖

我正在面臨困難，理解如何將數據從客戶端發送到ExpressJS服務器，以基於這些數據呈現視圖。發送數據到ExpressJS服務器呈現新視圖

在客戶端，用戶選擇不同的參數，更新所述「數據偏好」屬性（基本上爲0〜6）

<div class="userChoice" data-preference="0">Category_1</div> 
<div class="userChoice" data-preference="0">Category_2</div> 
.... Few more categories 
<div class="userChoice" data-preference="0">Category_N</div>

我能夠收集JSON數據{Category: preference_value}。

不過，我真的失去了（無論是客戶端和服務器端），當涉及到這些數據發送到服務器ExpressJS，並獲得基於該

我想什麼看法客戶端：

的jQuery：$.get但數據是在URL，它似乎過於複雜處理，因爲類別的數量可能是重要的
的jQuery：$.post但它似乎並沒有採取在服務器端考慮到app.render或app.sendFile。

我試過服務器端：

app.post但它似乎並沒有被好辦法，因爲我不能設法讓app.sendFile工作。
app.get但我無法得到一些數據（例如{Category: preference_value}）從客戶端

StackOverflow上很多問題都與此有關的話題，但我無法找到任何顯示如何處理雙方。任何幫助或鏈接將非常感激。

來源

2016-11-26 Igor OA

服務器端

如果使用ExpressJS發佈數據到服務器的NodeJS，你要安裝的body-parser中間件。這將允許您從req.body讀取發佈的值。所以一定要先安裝它並將其包含在您的項目中。

var bodyParser = require('body-parser'); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false }));

下方body-parser設置，創建一個app.post端點讀取所選擇的類別和呈現基於該值的圖。

//require path module to resolve html filepath 
var path = require('path'); 

// ... 

app.post('/category', function(req, res){ 

    var data = req.body; // { category: <preference_value> } 

    var viewName; 

    switch(data.category){ 
     case 0: 
     viewName = "ViewOne.html"; 
     break; 
     case 1: 
     viewName = "ViewTwo.html"; 
     break; 
     case 2: 
     viewName = "ViewThree.html"; 
     break; 
     default: 
     break; 
    } 

    var viewPath = path.join(__dirname + "/views/" + viewName); 

    res.sendFile(viewPath); 

})

您需要將要求path模塊，並用它來解決路徑到您的HTML文件。此外，請務必將ViewOne.html,ViewTwo.html和ViewThree.html放在project_root/views目錄中，以便path模塊可以找到它。

客戶端

的類別數據發佈到你的/category終點，你必須JSON.stringify類別數據和AJAX請求設置contentType: "application/json"：

$(document).ready(function(){ 

    var categoryData = JSON.stringify({category: 1}); 

    //this will render ViewTwo 

    $.ajax({ 
     type: "POST", 
     url: '/category', 
     data: categoryData, 
     success: function(html){ 
     $('body').html(html); // place the html wherever you like 
     }, 
     error: function(err){ alert('error'); }, 
     contentType: "application/json" 
    }); 
    })

如果AJAX請求成功後，它將返回在/category端點中檢索的視圖的HTML。

所以試試這個。希望它會讓你開始。

來源

2016-11-26 21:48:18

發送數據到ExpressJS服務器呈現新視圖

回答

相關問題