您好，我正在使用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外形container.left中心

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請求發送到同一頁面，希望根據用戶輸入用一定數量的字段重新加載頁面。但是，目前，頁面上沒有活動發生。我可以看到控制檯日誌中確實發送了該號碼。通過谷歌的檢查，我發現了一個錯誤：只有當職位被稱爲而且我不確定爲什麼會出現

Syntax error, unrecognized expression: html> < html >

此錯誤。

對不起，我在這裏寫了很多，但我在哪裏出錯了，我怎麼才能讓頁面刷新基於用戶輸入的字段數量？

來源

2017-05-08 Michael Ingram

修好了！

所以，這是我所做的解決這個問題，希望它可以幫助別人。

我修改了函數內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我創建了一個app.post爲「/新」，並使它創建一個變量稱爲字段（等於由用戶輸入號碼）和發送 'blankForm' 像這樣：

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

然後，我修改路由內我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。

我希望這可以幫助遇到類似問題的其他人。

來源

2017-05-10 13:42:57

基於用戶輸入的動態網站內容

PreviewImg外形container.left中心

回答

相關問題