Question

我试图在过去的6个小时内弄明白，但我没有想法......

我想要完成的事情：

我想显示一个看起来像这样的JSON数据

movie {title: " xxxxx", seed: "number", url: "zzzzzzzzz"}

我想在我的节点服务器上显示它（通过jade），但我到目前为止所做的是使用以下代码通过POST请求从网站发送到我的节点服务器：

我的JS脚本

var http = new XMLHttpRequest();
var url = "http://localhost:8080/";
var params = arr; <------ My JSON data
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    }
}
http.send(params);

在网站上我的谷歌浏览器开发者工具中使用上面的代码后我实际上有了这些数据，我在节点中收到了JSON数组，这是我的节点代码：

我的app.js节点服务器

const http = require("http");
const express = require('express');
const app = express();
const myParser = require('body-parser');


app.set('views', __dirname + '/views')
app.set('view engine', 'jade')
app.use(express.static(__dirname + '/public'))
app.use(myParser.urlencoded({ extended: false }));
app.use(myParser.json())

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}

app.use(allowCrossDomain);

app.get('/', function (req, res, next) {
  res.render('index');
})

app.get('/tl', function (req, res, next) {
  res.render('tl');
})

app.post("/", function (req, res) {
  response = {
    first_name: req.body
  };

  console.log('SHOW ME BODY')
  console.log(req.body);

  res.send('You sent: this to Express');
});

app.listen(8080);

这就是我在节点命令提示符下收到的内容：

{ '[{"title":" SOME-MOVE-TITLE","seed":"NUMBER","url":"https://SOMEURLS.COM', etc. etc. etc.

最后这是我的layout.jade文件

doctype
html
  head
    title Bolo Node Server
    link(rel="stylesheet", type="text/css", href="stylesheet/style.css")
  body
    header
      h1 My Site
      block content
    footer
      p Running on node with Express, Jade and Stylus

和index.jade

extend layout

block content
  p= 'Block content works'
  script.
    if req.body != undefined
      div(id='data')= req.body

我真的没有关于如何显示我接收的json数组的想法......请帮帮我

更新

我的index.jade

扩展布局

block content
  p= 'Block content works'
  div(id='data')
    pre
      test= jsonString

我的app.js现在看起来像这样：

app.get('/', function (req, res, next) {
  res.render('index');
})

app.post("/", function (req, res) {
  // Get string representation
  var jsonString = JSON.stringify(req.body || {}); // use JSON.stringify(req.body || {}, null, 2) for formatted JSON
  console.log(jsonString);
  res.render('index', {test: jsonString});

  //res.send('You sent: this to Express');
});

我在我的节点命令提示符中看到了数据，但是我在本地网站上看不到它http://localhost:8080/ div（id ='data'）显示为空...没有，我怎么得到jsonString那里？？我希望它能在我的本地网站上显示数据..

**

更新

**

我最终只是将数据放入sqlite3数据库，然后通过GET请求检索数据，最后将其放入我的jade模板中。我以为我可以四处走动而不使用sqlite3，但我无法弄清楚如何。

Answer 1

当您说要显示json时，如果您只想查看json的内容，可以使用res.json。

app.post("/", function (req, res) {
  // Send back the request body if present or else, an empty object
  res.json(req.body || {});
});

如果希望它显示在模板中，您可以使用JSON.stringify(req.body)获取json的字符串表示形式，并通过将其作为局部变量传递给模板来呈现它。

app.post("/", function (req, res) {
  // Get string representation
  var jsonString = JSON.stringify(req.body || {}); // use JSON.stringify(req.body || {}, null, 2) for formatted JSON

  res.render('jsonView',{jsonString});
});

在你的模板中：

div(id='data')
  pre
    code = jsonString

Answer 2

您应该传递模板中的数据。

res.render('index', {data: 'data'});

并显示：

data = data
    p #{data}

Answer 3

首先，您应该解析传入的数据，application/x-www-form-urlencoded也是如此。您首先需要JSON.parse req.body并将您的回复编码为json

app.post("/", function (req, res) {
  var  response = try { JSON.parse(req.body) } catch(e) { console.error('Invalid Data') };
  res.json(response || {});
});

你也可以从你的客户端JS发送你的数据作为'application / json'并保存直接收到JSON到req.body。

希望有所帮助

UPDATE （如果您想通过客户端上的异步请求追加新数据）

在此post中，您可以看到XmlHttpRequest与jquery $.ajax()一起使用，这与在服务器上呈现DOM后的异步请求概念基本相同。

想象一下，第3步是你的Jade渲染HTML

Answer 4

我最终只是将数据放入sqlite3数据库，然后通过GET请求检索数据，最后将其放入我的jade模板中。我以为我可以四处走动而不使用sqlite3，但我无法弄清楚如何。

这是代码

app.post("/", function (req, res) {
  var jsonString = JSON.stringify(req.body || {});
  db.serialize(function () {
    var stmt = db.prepare("INSERT INTO movies (id, title, seed, url) VALUES (?,?,?,?)");
    for (var i = 0; i < req.body.length; i++) {
      var d = new Date();
      var data = req.body;
      var n = d.toLocaleTimeString();
      stmt.run(i, req.body[i].title, req.body[i].seed, req.body[i].url);
    }
    stmt.finalize();
  });
  res.send('You sent: this to Express');
});

从数据库中检索数据

app.get('/tl', function (req, res, next) {
  db.all('select * from movies', function (err, rows) {
    if (err)
      return next(err);
    var dataO = [];
    rows.forEach(function (row) {
      dataO.push(row);
    })
    res.render('tl', { dataO: dataO });
  })
})

Nodejs：显示其他网站

更新

4 个答案: