问我不知道如何使用更新的json数据呈现新页面。
EN

Stack Overflow用户

提问于 2020-06-26 15:42:23

回答 2查看 35关注 0票数 0

我不确定我的错误在哪里。我是node的新手，我已经学到了很多东西。这个过程有点匆忙，因为这是一个暑期班，所以节奏很快。我知道我的路由/控制器很奇怪，这不是最好的格式。我计划在最后期限完成后“修复”这个项目。

我需要从AJAX中获取结果并将其放入post.ejs文件中。当用户点击我的index.ejs中的一个标题时，我希望它用正确的post.title和post.content将他们重定向到我的post.ejs文件

下面是我要调用的onclick函数的Ajax

$("#thisTitle").on("click", function (e) {
  e.preventDefault();
  var post = $(this).text();

  $.ajax({
    type: "GET",
    url: "/post/" + post,
    dataType: "json",
    success: function (data) {
      location.assign("/post");
    },
  });
});

这是我的index.ejs文件

<div class="row">
  <div class="column">
    <div id="containerBlogPost">
      <div class="blogPost">
        <a href="">
          <h3 class="resize" id="thisTitle"><%= posts[0].title %></h3>
        </a>
        <p class="resize">
          "<%= posts[0].content %>"
        </p>
      </div>
    </div>
  </div>
</div>

最后，下面是我的GET请求

app.get("/post/:item", async (req, res) => {
  try {
    const post = await Post.findOne({ title: req.params.item });
    res.json({
      title: post.title,
      content: post.content,
    });
  } catch (err) {
    res.json({ message: err });
  }
});

app.get("/post", function (req, res) {
  Post.find({}, function (err, data) {
    if (err) throw err;
    res.render("post", { posts: data });
  });
});

下面是我尝试访问动态json数据的post.ejs

<!DOCTYPE html>
<html>
  <body>
    <%- include('partials/header'); -%>

    <div class="post-page">
      <div class="postContainer">
        <div class="postTitle">
          <h3 id="singlePostTitle"><%= test %></h3>
        </div>

        <div class="blogPostPage" id="singlePostContent"><%= test %>"</div>
      </div>
    </div>
  </body>
</html>

当我访问postman上的GET请求/post/:item时，我得到了我想要获取的结果。我只是不知道如何使用json数据并将其正确地传递到ajax来呈现具有/post/:item动态数据的/post页面

ajax

javascript

node.js

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 2

Stack Overflow用户

发布于 2020-06-26 16:08:29

使用ajax调用，您将获得与您正在查找的帖子的数据相对应的JSON，并且它应该在相同的文档中使用它的数据，在本例中为index.ejs。当在$ajax回调success中实现JSON时，您将重定向到另一个文档，而JSON仍未使用。也许您应该重新考虑您想要做什么，例如，您可以在同一视图index.ejs中显示在ajax中获得的帖子，例如

在index.ejs中，添加带有输出类的div

<div class="blogPost">
  <div class="output"></div> <!-- add this element -->
  <a href="">
    <h3 class="resize" id="thisTitle"><%= posts[0].title %></h3>
  </a>
  <p class="resize">
    "<%= posts[0].content %>"
  </p>
</div>

在javascript中

$("#thisTitle").on("click", function (e) {
  e.preventDefault();
  var post = $(this).text();

  $.ajax({
    type: "GET",
    url: "/post/" + post,
    dataType: "json",
    success: function (data) {
      document.querySelector(".output").innerHTML = JSON.stringify(data);

      // location.assign("/post");
    },
  });
});

重要的是，您理解了调用ajax的结果应该在什么上下文中使用，我希望这对您有用

票数 0

Stack Overflow用户

发布于 2020-06-26 16:36:24

我没有完全理解您的意思，但我知道您希望在AJAX脚本和Router文件之间来回传递JSON数据。以下代码将帮助您完成此操作：

将数据从AJAX传递到路由器(使用POST方法：

Script.js (AJAX)：

            $.ajax({
                url: '/post/'+post,
                method: 'POST',
                contentType: 'application/json', // to set header content-type
                dataType: 'json', // must be defined
                data: JSON.stringify(data), // 'data' is the files you want to pass to the router (in your case it is 'title'
                success: function(res){
                    console.log('data passed success fully')
                },
                error: function(){
                    console.log('error')
                }
            })

Router.js：

app.post("/post/:item", function (req, res) {
  console.log(res.body)
});`

要将数据从路由器传递到AJAX (使用GET方法)：

Router.js：

app.get("/post", async (req, res) => {
  try {
    const post = await Post.findOne({ title: req.params.item });
    res.json({
      title: post.title,
      content: post.content,
    });
  } catch (err) {
    res.json({ message: err });
  }
});

Script.js (AJAX)：

             $.ajax({
                    url: '/post',
                    method: 'GET',
                    success: function(res){
                        console.log(res.title)
                        console.log(res.content)
                    },
                    error: function(){
                        console.log('error')
                    }
                })