Basic Expressjs查询

Question

这个问题可能听起来令人困惑和愚蠢。我刚刚开始使用nodejs。

不管怎么说，我有一个表单，当用户提交它时，我想显示一个html元素和响应。所以，我使用了body parser，并用jade视图引擎显示它。

问题 - 要显示与bodyParser的结果，我已经创建具有可变的HTML元素事先p #{url}（它位于空，直到响应），我还需要淡入的反应，但我不能用视图引擎做到这一点。有没有办法将服务器端变量共享到另一个JavaScript文件，以便我可以使用jQuery？最好的做法是什么？

什么我试过到目前为止 - 我读了一堆问题，说用Ajax来做到这一点，但我无法弄清楚如何从服务器获取与阿贾克斯的文件中。 res.sendres.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\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/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; 

Answer 1

为了澄清，你的问题是在元素的衰落？如果是这种情况，请将您的post路由中的代码先移到jquery文件中。

然后做这样的事情：

$('#urlform').on('submit', function(){ 
    var patt = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/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> 

example fiddle