Question

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

无论如何，我有一个表单，当用户提交它时，我想显示一个带有响应的html元素。所以，我使用了body解析器并将其与jade视图引擎一起显示。

问题 - 要使用bodyParser显示结果，我要先创建一个带有变量的html元素p #{url}（在响应之前它是空的）我还需要对fadein的反应，但我不能用视图引擎做到这一点。有没有办法将服务器端变量共享到另一个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\.)?[-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

基本Expressjs查询

1 个答案: