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

Question

我正在尝试在我的 Node/快速应用程序的另一个 View 中发布表单数据。我使用 Jade 作为 View 引擎。

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

我的问题是如何访问这个 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');
};

新 View 上的本地 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

Hector 是正确的，因为 View 只能访问您直接传递给它的内容。所以问题仍然是您想传递给它什么？

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 部分的 SO 问答:How can I render inline JavaScript with Jade?