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