时间戳

首页 > 解决方案 > 如何在不重新加载表单节点 js 和 ejs 的情况下发送数据

node.js - 如何在不重新加载表单节点 js 和 ejs 的情况下发送数据

问题描述

那里。我正在创建一个博客网站，我想对该帖子发表一些评论。但表单正在重新加载，没有获取数据来存储 MongoDB。我在互联网上搜索，所以我得到了 ajax，但 ajax 不起作用，这对我来说是新的。帮我解决这个问题。我正在使用节点 js 和 ejs 模板和 MongoDB。节点js代码

  app.post("/do-comment", async (req,res) =>{      
    const comment = new Comment({name:req.body.name,comment:req.body.comment});
    await comment.save();
    await Blog.findOneAndUpdate({_id:req.body._id}, {$push: {comment}});
    res.send("Comment was added successfully");
})

HTML 代码

  <!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Blogs</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

       
        <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-primary">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Blogs</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/compose">compose</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
                <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>

<div class="container">
    <div class="col">
        <img src="data:image/<%=post.image.contentType%>;base64,
        <%=post.image.data.toString('base64')%>" alt="photo"width="1000px" height="500px" alt="photu">
    <h1><%= post.title %></h1>
    <p><%= post.content %></p>
</div>
<div class=''>
    // form is here for comment
    <form method="POST" onsubmit="return doComment(this);" class="theme-form-one">
        <input type="hidden" name="_id" value="<%=post._id %>">
            <div class="row">
             <div class="col-md-6 col-12"><input type="text" name="name" placeholder="Name"></div>
             <div class="col-12"><textarea name="comment" placeholder="Comments"></textarea></div>
          </div>
        <button class="theme-button-one">POST COMMENT</button>
    </form>
</div>
//// catching comments here
<div class="">
    <div class="container-fluid">
       <% data.forEach(function(cData){ %>
            <h1><%= cData.name %></h1>
            <p><%= cData.comment %></p>
        <% }) %>
        
    </div>
</div>
</div>
//js code here
<script>
    function doComment(form){
    $.ajax({
    url:"/post/do-comment",
    method:"POST",
    data:{name:form.name.value,comment:form.comment.value,
        _id:form._id.value},
    success: function(response){
    alert(response);
        }
    });
    return false;
}
</script>
</body>

</html>

标签： node.jsajaxmongodbformscomments

解决方案

推荐阅读