Question

我在理解如何从客户端向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但数据在网址中，由于类别数量可能很重要，因此处理起来似乎太复杂了
jQuery：$.post但它似乎没有考虑服务器端的app.render或app.sendFile。

我尝试了服务器端：

app.post但似乎不是好方法，因为我无法让app.sendFile工作。
app.get但我无法从客户端获取一些数据（例如{Category: preference_value}）

关于StackOverFlow的很多问题都与这个主题有关，但我无法找到任何显示如何处理双方的问题。任何帮助或链接将非常感激。

Answer 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。

试试这个。希望它能让你开始。

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

1 个答案: