发送数据到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服务器呈现新视图

回答

相关问题