Basic Expressjs查询
问题描述:
这个问题可能听起来令人困惑和愚蠢。我刚刚开始使用nodejs。Basic Expressjs查询
不管怎么说,我有一个表单,当用户提交它时,我想显示一个html元素和响应。所以,我使用了body parser,并用jade视图引擎显示它。
问题 - 要显示与bodyParser的结果,我已经创建具有可变的HTML元素事先p #{url}
(它位于空,直到响应),我还需要淡入的反应,但我不能用视图引擎做到这一点。有没有办法将服务器端变量共享到另一个JavaScript文件,以便我可以使用jQuery?最好的做法是什么?
什么我试过到目前为止 - 我读了一堆问题,说用Ajax来做到这一点,但我无法弄清楚如何从服务器获取与阿贾克斯的文件中。 res.send
res.json
和其他一些不起作用的东西。
index.jade
extends ../public/layouts/default
block content
#onlydiv
#onlydiv-inside
p Paste your URL below to shorten it
form#urlform(action='/add', method='post')
input#area(type='text' name='url', placeholder = 'www.facebook.com', autocomplete = 'off' required)
input#button(type='submit')
p #{url}
路线
var express = require('express');
var url = require('.././models/first.js');
var router = express.Router();
router.get('/', function(req,res) {
res.render('index');
res.end();
})
router.post('/add',function(req,res) {
var patt = /(www\.)?[[email protected]:%._\+~#=]{2,256}\.[a-z]{2,4}\b([[email protected]:%_\+.~#?&//=]*)/g;
var url = req.body.url;
if(patt.test(url) === false) {
res.render('index', {
url : 'Invalid Url'
})
} else {
res.render('index', {
url : 'Invalid Url'
})
}
})
module.exports = router;
答
为了澄清,你的问题是在元素的衰落?如果是这种情况,请将您的post
路由中的代码先移到jquery文件中。
然后做这样的事情:
$('#urlform').on('submit', function(){
var patt = /(www\.)?[[email protected]:%._\+~#=]{2,256}\.[a-z]{2,4}\b([[email protected]:%_\+.~#?&//=]*)/g;
var url = $("input[name=url]").val();
if(patt.test(url) === false) {
$("#urlerr").html("Invalid URL").fadeIn("slow");
return false;
}
});
<div id="onlydiv">
<div id="onlydiv-inside">
<p>Paste your URL below to shorten it</p>
<form id="urlform" action="" method="">
<input id="area" type="text" name="url" placeholder="www.facebook.com" autocomplete="off" required="required"/>
<input id="button" type="submit"/>
</form>
<p id="urlerr" style="display: none;"></p>
</div>
</div>
为了澄清,你的问题是在元素的衰落?如果是这种情况,首先将代码从'post'路由移动到jquery文件。然后在表单提交运行您的jQuery URL验证。如果它没有通过停止表单提交并显示错误。无论客户端验证如何,您都应该始终在服务器端进行验证 – Craicerjack