bugfix> node.js > 投稿

デフォルトでは、有効なユーザーをブートストラップで表示するWebサイトを作成していますが、すべてのユーザーを表示するチェックボックスがあります。しかし、どうすればそれを適切に実装できるのかわかりません。

私はやろうと思った:

 <form class="" action="/admin" method="get">
    <input type="checkbox" name="showDisabled" value="">
    <input type="submit" name="" value="">
  </form>

そして、私の/ adminルートで:

 if (req.body.showDisabled) {
  User.find({}, (err, users) => {
    if (err) {
      console.log(err);
    }
  }).then((users) => {
    res.render('pages/userTable', {users: users});
  })
} else if (!req.body.showDisabled) {
  User.find({enabled: true}, (err, users) => {
    if (err) {
      console.log(err);
    }
  }).then((users) => {
    res.render('pages/userTable', {users: users});
  })
}

しかし、それは本当にジャンキーなようです。それを行うより良い方法は何ですか?

回答 1 件
  • これを試すことができます:

    ルーター

    app.get('/getDiasbleUser', function(req, res) {
    var getDiasbleUser = req.params.showDisabled
    if (getDiasbleUser == "Yes") {
        User.find({}, (err, users) => {
            if (err) {
                console.log(err);
            }
        }).then((users) => {
            res.send(users);
        })
    } else if (getDiasbleUser == "No") {
        User.find({
            enabled: true
        }, (err, users) => {
            if (err) {
                console.log(err);
            }
        }).then((users) => {
            res.send(users);
        })
    }
    })
    
    

    HTML(テンプレート)

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       </head>
    
       <body>
          <div class="container">
             <form class="" action="/admin" method="get">
                <input type="checkbox" id="disableId" name="showDisabled" value=""><br>
                <div id="appendValue"></div>
                <br>
                <button class="btn btn-primary">Submit</button>
             </form>
          </div>
       </body>
        //Ajax call
       <script>
          $('#disableId').on('click', function () {
                 $(this).val(this.checked ? 1 : 0);
                 //console.log($(this).val());
                 var url = "";
                 if($(this).val() == 1){
                    url = "/getDiasbleUser?showDisabled=yes"
                 } else {
                    url = "/getDiasbleUser?showDisabled=no"
                 }
                 $.ajax({
                    url: url,
                     success: function(data){
                        //Here data will be return result(You will append into div or table)
                        //like : $('#appendValue').append(data)
                     }
                 })
             });
        </script>
    </html>
    
    

あなたの答え