我基本上需要具备以下条件:
- 浏览器通过网络摄像头读取二维码
- 内容通过
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;
如何重新加载显示二维码内容的索引页面 (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 请求)。不知何故，第二次渲染不会发生。
最佳答案
对于发布请求，浏览器不会呈现新页面。您可以将 res.redirect 发送到另一个呈现结果页面的“get”端点，也可以将 router.post 路由更改为 router.get 并将 qrcode 作为查询参数 '/?qrcode=... 传递'
关于javascript - Node.js 使用数据重新加载模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46708488/