Question

我正在尝试在我的node / express应用程序中的另一个视图中发布表单数据。我正在使用Jade作为视图引擎。

表格已发布
Handler将req.body传递给res.body
视图呈现

我的问题是如何访问此res.body对象？如何获取数据？我正在尝试使用用户输入来绘制一些图形。

以下代码

barchartEntry.jade

form(method="POST")
        #dynamicInput
            input(type="button" value="Add New Bar" onClick="addInput('append');")
            input(type="button" value="Remove Last Bar" onClick="removeInput();")
            br
            label(class="barTitle") Bar 1
            label(class="bartTtle") Value
                input(type="text" name="myInputs[]")
            label Label
                input(type="text" name="myLabel[]")
            br
            #append
            input(type="submit" value="Submit")
    include copyright

路线处理程序

exports.postBarchartentry = function postBarchartentry(req, res){
    res.body = req.body;
    res.render('barchart');
};

新视图

本地JS

$( document ).ready(function() {

        var values = ?
        var labels = ?

        var canvas = document.getElementById("canvas").getContext("2d");
        var Width = canvas.canvas.clientWidth;
        var Height = canvas.canvas.clientHeight;
        var padding = 30;



        function fillBackground(color){
            canvas.fillStyle=color;
            canvas.fillRect(0,0,Width,Height);
        }

        function fillAxes(){
            canvas.beginPath();
            canvas.moveTo(padding, padding);
            canvas.lineTo(padding, Height-padding);
            canvas.lineTo(Width-padding, Height-padding);
            canvas.lineWidth = "3"
            canvas.strokeStyle="black";
            canvas.stroke();
        }

        function draw(){
            fillAxes();
        }

        draw();
});

正如您所看到的，我正在尝试将输入的表单数据设置为可在我的上一个脚本中访问

Answer 1

我的问题是如何访问此res.body对象？如何获取数据？

如您所示，您可以在控制器中访问此数据。如果要将此数据传递到另一个视图，则需要将其显式传递到下一个视图。

exports.postBarchartentry = function postBarchartentry(req, res){
    res.render('barchart', {data1: req.body.field1, data2: req.body.field2});
};

在条形图视图中，您有两种选择。（1）您可以使用新数据直接（通过Jade）呈现HTML。例如，如果data1有数据，则添加div。（2）您还可以在页面上呈现JavaScript（再次通过Jade），以便在浏览器执行onReady时可以使用这些值，我认为这就是您要做的事情。

另外，请确保在应用程序的某处使用Express'bodyParser中间件，以便req.body.X具有实际数据：

app.use(express.bodyParser())

Answer 2

Hector是正确的，因为视图只能访问您直接传递给它的内容。那么问题仍然是你想要传递给它的是什么？

req.body确实是一个JavaScript对象，你的标记提供了一种非常好的方式来获取内容。

我整理了一个小测试项目，我使用了你的标记：

label(class="barTitle") Bar 1
label(class="bartTtle") Value
  input(type="text" name="myInputs[]")
label Label
  input(type="text" name="myLabel[]")

当我提交该表单时，在我的帖子处理程序中我有这样的内容：

 app.post('/arraytest', function(req,res) {
   console.log(req.body)
   res.send(req.body)
 })

（我们暂时忽略了将实际处理程序与路由调用一致的丑陋）。当该表单提交时，我得到req.body的这个对象：

{ myInputs: [ '3' ], myLabel: [ 'asdf' ] }

为了好玩，我添加了第二个输入框和复数myLabel，以便我的表单看起来像这样：

label(class="barTitle") Bar 1
label(class="bartTtle") Value
  input(type="text" name="myInputs[]")
label Label
  input(type="text" name="myLabels[]")
label(class="barTitle") Bar 2
label(class="bartTtle") Value
  input(type="text" name="myInputs[]")
label Label
  input(type="text" name="myLabels[]")

请注意，我没有更改任何名称。我在末尾用阵列支架留下了它们。提交此表单给了我以下对象：

{ myInputs: [ '3', '4' ], myLabels: [ 'asdf', 'asdfasfsdf' ] }

因此，浏览器和正文解析之间的交互为您提供了两个包含所有值的数组。数组很容易循环。如果您将渲染调用修改为：

res.render('barchart', {inputs: req.body.myInputs, labels: req.body.myLabels})

然后在你看来你可以有类似的东西：

- each input, i in inputs
  = input
  = myLabels[i]

但是既然你想在JS中访问它，你可以在你的Jade中使用它：

script.
  var inputs = !{JSON.stringify(inputs)}
    , labels = !{JSON.stringify(labels)}

  alert(inputs)
  alert(labels)

你可能不需要alert来电，但是我把它们放在那里说服我这样做了。

非常感谢动态JS部分的这个问题和答案：How can I render inline JavaScript with Jade?

在javascript中访问已发布的表单数据

2 个答案: