将数据发送到 ExpressJS 服务器以呈现新视图答案

【问题标题】：Send data to ExpressJS server to render new view将数据发送到 ExpressJS 服务器以呈现新视图
【发布时间】：2017-04-10 20:38:55
【问题描述】：

我很难理解如何将数据从客户端发送到 ExpressJS 服务器，以根据这些数据呈现视图。

在客户端，用户选择不同的参数，更新'data-preference'属性（基本上从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 上的很多问题都与这个主题有关，但我找不到任何显示如何处理双方的问题。任何帮助或链接将不胜感激。

【问题讨论】：

标签： javascript jquery express server client

【解决方案1】：

服务器端

如果您使用 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。

所以试试这个。希望它能帮助您入门。

【讨论】：