javascript - 基于用户输入的动态网站内容

Question

您好，我正在使用 Node JS 和 Jade 创建一个网站。我正在尝试在网站上创建一个表单，该表单将根据用户输入显示不同数量的字段，但是，我似乎无法让它工作。我究竟做错了什么？

在我的 Routes.js 中，我有这些页面:

app.post('/newBlank', function(req, res) {
    if (req.session.user == null){
// if user is not logged-in redirect back to login page //
        res.redirect('/');
    }   else{

        fields = req.body.id    
        console.log(fields + " here")

        res.render('newBlank', {fieldsNo: req.body.id});
        console.log(req.body.id)

    }
});

app.get('/newBlank', function(req, res) {
        if (req.session.user == null){
    // if user is not logged-in redirect back to login page //
            res.redirect('/');
        }   else{
            fields = req.body.id

            res.render('newBlank', {
                title : 'New Blank',
                company : 'Company',
                fieldsNo : fields,
                udata : req.session.user
            });
        }
    });

newBlank.jade 访问一个newBlank.js 和一个blank.jade

blank.jade如下:

#noform-form-container.left-center
form(method="post")#new-form.form-horizontal.well
    h2
    h6#sub1 How many fields would you like?
    hr
    .form-group
    .form-left-buttons
        input(type="number", value = 2)#NofFields
        button(type='button')#blank-form-btn1.btn.btn-default
    .form-group

PreviewImg-form-container.left-center

form(method="post")#PreviewImg-form.form-horizontal.well
    h2
    h6#sub1 This is what your form will look like on mobile
    hr
    .form-group
    .form-previmg
        img(src="images/MobileView.png")

new-fields-form-container.center

form(method="post")#new-fields.form-title.well
    h2
        .form-group
        .form-center-title
            input(type="text", value="Insert Form Title Here", id="FormTitle")
        .form-group
            input(type="text", value=fieldsNo)
            - for(var i = 0; i < fieldsNo; i++)
                hr
                .form-group
                .form-left-buttons
                    input(type="text", value="Test", id="Test")

最后在 newBlank.js 中是:

this.SetNoFields = function()
{ 
    $.ajax({
        url: '/newBlank',
        type: 'POST',
        data: { id: $('#NofFields').val()},
        success: function(data){
            $('#new-fields-form-container').load(data);
        }
    });
}

因此，页面 (newBlank) 最初是通过 GET 请求加载的，然后用户在空白处的 #NofFields 输入中键入一个数字，当按下按钮时，该数字将通过 POST 请求发送到同一页面，希望根据用户输入重新加载具有一定数量字段的页面。然而，目前页面上没有任何事件发生。通过console log可以看到号码确实发送了。通过谷歌的检查我发现了一个错误:

Syntax error, unrecognized expression: html> < html >

此错误仅在调用帖子时出现，我不确定原因。

抱歉，我在这里写了很多，但是，我哪里出错了，我怎样才能让页面根据用户输入的字段数量进行刷新？

Answer 1

修复了!

所以，这就是我所做的解决此问题的方法，希望它能帮助其他人。

我像这样修改了 newBlank.js 中的函数:

this.SetNoFields = function()
{ 
    $.ajax({
        url: '/new',
        type: 'POST',
        data: { id: $('#NofFields').val()},
        success: function(data){
            $('#new-fields-form-container').load(data);
        }
    });
}

在我的 routes.js 中，我为 '/new' 创建了一个 app.post 并让它创建一个名为 fields 的变量(等于用户输入的数字)并像这样发送 'blankForm':

app.post('/new', function(req, res) {
    if(req.session.user == null){
        res.redirect('/');
    } else {
        fields = req.body.id
        res.send('blankForm');
    }
});

然后，我在我的 route 修改了我的 app.get '/blankForm' ，如下所示:

app.get('/blankForm', function(req, res) {
    if (req.session.user == null){
// if user is not logged-in redirect back to login page //
        res.redirect('/');
    }   else{
        res.render('blankForm', {
            fieldsNo : fields,
            udata : req.session.user
        });
    }
});

这允许它呈现 blankForm Jade 文件并将在 app.post('/new') 中创建的字段变量作为 fieldsNo。

我希望这对遇到类似问题的其他人有所帮助。