Запрос Basic Expressjs

Question

Вопрос может показаться запутанным и глупым. Я только что начал с nodejs.

В любом случае, у меня есть форма, и когда пользователь отправляет ее, я хочу отобразить элемент html с ответом. Итак, я использовал синтаксический анализатор тела и отобразил его с помощью механизма просмотра нефрита.

Проблема - Для того, чтобы отобразить результат с bodyParser, Я создать HTML-элемент с переменной заранее p #{url} (Он пустует до ответа), и я также нужен ответ на FadeIn, но я не могу сделайте это с помощью механизма просмотра. Есть ли способ передать переменную стороне сервера в другой файл javascript, чтобы я мог использовать jquery? Какая у него лучшая практика?

Что я пробовал до сих пор - Я прочитал кучу вопросов, говорящих, чтобы сделать это с помощью ajax, но я не смог понять, как получить ответ с сервера на файл с помощью 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