简体   繁体   中英

Is there any way to get value in node js server while clicking on div

Here is my EJS file

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sart Plug</title>
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/usrDashboard.css">
    <link rel="icon" href="/images/plugimg.png" type="image/x-icon" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <a href="#" class="logo">Select Device</a>
        <div class="header-right">
          <a href="/logout">Log Out</a>
        </div>
      </div>
      <div class="jumbotron" id="jumbo">
        <p><%=data.noResult%></p>
        <div class="row">
          <% for(var i=0; i < data.result.length; i++) { %>
            <div class="col-25">
              <a href="/plugDashboard">
                <p><img class="img-fluid" src="/images/plugimg.png" alt="Plug Image"></p>
                <p><h3><%= data.result[i].device_name %></h3></p>
                <p><h6><%= data.result[i].device_address %></h6></p>
              </a>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>

Html view here

My routes are in the below route:-

app.get('/usrDashboard', checkAuthenticted, (req, res) => {
  let email = req.user.email;
  con.query("SELECT device_name, device_address FROM pluglist WHERE email ='"+ email +"' " , (err, result, fields)=> {
    if(err) throw err;
    console.log(result);
    if (result.length === 0) {
      res.render('usrDashboard',{data:{email: email,
                                        result:result,
                                        noResult:'You have no saved device'}});
    }
    else {

      res.render('usrDashboard',{data:{email: email,
                                        result:result}});
    }
  });
})

app.get('/plugDashboard', checkAuthenticted, (req, res) => {
  console.log(req);
  res.render('plugDashboard');
})

SO here I want, whenever I click on any of the div I want to print the mac id in log from the respective div in plugDashboard section. So is there any way to do so? I searched for many solutions none of them were helpful for me.

You can add new GET express route, for example:

 router.get('/get_mac_info/:mac_id', function(req, res, next) { res.json({ mac_id: 'test_id' }); });

and after that just add ajax call on click event:

 $(function () { $(document).on('click', '.col-25', function (e) { $.get('/get_mac_info/' + mac_id, function(data){ $('.print_container').text(data) }) e.preventDefault(); }); });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM