在javascript中访问发布的表单数据
我试图在我的节点/快递应用程序中的另一个视图张贴表单数据。 我使用Jade作为视图引擎。
- 表格已过帐
- 处理程序将请求传递给res.body
- 视图呈现
我的问题是我如何访问这个res.body对象？ 如何获取数据？ 我正在尝试使用用户input来绘制一些图。
下面的代码
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(); });
正如你所看到的，我试图让input的表单数据在我上一个脚本中可访问
Hector是正确的，因为视图只能访问你直接传入的内容。 所以问题仍然是你想要通过它？
req.body确实是一个JavaScript对象，你的标记提供了一个非常好的方法来获取内容。
我放了一个testing项目，我用你的标记：
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' ] }
为了好玩，我添加了第二个input框，并将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' ] }
所以浏览器和正文parsing之间的交互给你两个数组，包括你所有的值。 数组很容易循环。 如果你修改你的渲染调用看起来像：
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呼叫，但我把它们放在那里说服我，它的工作。
非常感谢这个dynamicJS部分的问题和答案： 如何使用Jade呈现内联JavaScript？
我的问题是我如何访问这个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())