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

Question

我很难理解如何将数据从客户端发送到 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}）

Whosebug 上的很多问题都与此主题相关，但我找不到任何显示如何处理双方的问题。任何帮助或 link 将不胜感激。

Answer 1

服务器端

如果您要使用 ExpressJS post将数据传输到 NodeJS 服务器，您需要安装 body-parser 中间件。这将允许您从 req.body 读取 posted 值。所以一定要先安装这个并将它包含在你的项目中。

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 模块可以找到它。

客户端

要将类别数据 post 发送到您的 /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 请求成功，它将 return HTML 用于 /category 端点中检索到的视图。

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

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

Send data to ExpressJS server to render new view

javascript

jquery

client

express

server