Question

我基本上需要具备以下条件：

浏览器通过网络摄像头读取QR码
内容将通过ajax post
Node.js后端应处理此数据并在索引页上再次显示结果

以下是代码：

index.ejs

<!DOCTYPE html>
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
        <script type="text/javascript" src="/javascripts/instascan.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div style="display: none;">
                <video id="preview" style="display: none;"></video>
            </div>
            <div class="qrcode" id="qrcode"><%= qrcode %></div>

            <script type="text/javascript">
                scanner = new Instascan.Scanner({video: document.getElementById('preview')});
                scanner.addListener('scan', function(content) {
                    console.log(content);
                    $.post('/', { qrcode: content }, function (data, status) {
                        //console.log(status);
                    });
                });
                Instascan.Camera.getCameras().then(function (cameras) {
                    if (cameras.length > 0) {
                        scanner.start(cameras[0]);
                    } else {
                        console.error('No Cameras found!');
                        alert('No Cameras found!');
                    }
                }).catch(function (e) {
                    console.error(e);
                });
            </script>
        </div>
    </body>
</html>

indes.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', qrcode: '' });
});

router.post('/', function (req, res) {
  console.log(req.body.qrcode);
  res.render('index', {
      title: 'Express',
      qrcode: req.body.qrcode
  });

});

module.exports = router;

如何重新加载显示QR码内容的索引页面（req.body.qrcode）？

更新：我尝试使用评论中提到的GET而不是POST。所以index.js现在是

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res, next) {
    qrcode = '';

    if (req.query.qrcode) {
        qrcode = decodeURIComponent(req.query.qrcode);
    }

    res.render('index', { title: 'Express', qrcode: qrcode });
    console.log(req.query);
});

（ajax get也相应更新，即我收到有效的GET请求）。不知何故，第二次渲染不会发生。

Answer 1

从发布请求中，浏览器不会呈现新页面。您可以将res.redirect发送给另一个＆＃34;获取＆＃34;端点，用于呈现结果页面，或者您可以将router.post路由更改为router.get并将qrcode作为查询参数传递＆＃39; /？qrcode = ...＆＃39;

Answer 2

尝试GET请求后，我又回到POST并使用success参数。这样我就可以轻松地从后端发回响应。

$.ajax({
    type: 'POST',
    data: JSON.stringify({qrcode: content}),
    contentType: 'application/json',
    url: '/',
    success: function(data) {
        document.getElementById('qrcode').innerHTML = data;
    }
});

Node.js使用数据重新加载模板

2 个答案: