<script src="js/jquery.min.js"></script>
<script>
  $.ajax({
      url: 'BlogList',
      method: 'GET',
      success: function(data, status) {
          // 思想: 先按照纯前端代码创建相应的节点, 之后再挂在 DOM 树上
          let blogs = data;
          let rightDiv = document.querySelector('.type_area .right');
          for (let blog of blogs) {
              let blogDiv = document.createElement('div');
              blogDiv.className = 'blog';
              // 博客标题
              let titleH3 = document.createElement('h3');
              titleH3.innerHTML = blog.title;
              titleH3.className = 'title';
              // 博客格式化日期 (年月日-时分秒)
              let dateDiv = document.createElement('div');
              dateDiv.innerHTML =  formatDate(blog.postTime); // 此处的 postTime 原先是一个毫米级的时间戳, 应该转换成格式化的日期
              dateDiv.className = 'date';
              // 博客摘要
              let abstractDiv = document.createElement('abstract');
              abstractDiv.innerHTML = blog.content; // 这里在服务器端已经将截取了字符串
              abstractDiv.className = 'abstract';
              // 跳转博客内容页的链接
              let linkA = document.createElement('a');
              linkA.innerHTML = '查看全文 &gt;&gt';
              linkA.href = 'blog_content.html?blogID=' + blog.blogID;
              // 最后,将所有准备好的节点挂在 DOM 树上
              blogDiv.appendChild(titleH3);
              blogDiv.appendChild(dateDiv);
              blogDiv.appendChild(abstractDiv);
              blogDiv.appendChild(linkA);
              // 最后最后一步, 将 blogDiv 这样的一个一个 blog 盒子挂在博客展示栏上 
              rightDiv.appendChild(blogDiv);
          }        
      }
  })
<script>

<!-- 基于 ajax 的方式来从服务器中获取数据 -->
<script src="js/jquery.min.js"></script>
<!-- 当前的 ajax 请求是期望展示单篇博客的内容 -->
<script>
  $.ajax({
      url: 'BlogContent' + location.search,
      method: 'GET',
      success: function(data, status) {
          let blog = data;
          // 博客标题
          let titleH3 = document.querySelector('.blog .title');
          titleH3.innerHTML = blog.title;
          // 博客格式化日期
          let dateDiv = document.querySelector('.blog .date');
          dateDiv.innerHTML = formatDate(blog.postTime);
          // 单篇博客的内容
          let contentDiv = document.querySelector('.blog .content');
          contentDiv.innerHTML = blog.content;   
      }
  })
<script>

@WebServlet("/BlogContent")
public class BlogContentServlet extends HttpServlet {
    ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=UTF-8");
        String blogID = req.getParameter("blogID");
        BlogDB blogDB = new BlogDB();
        Blog blog = blogDB.searchOne(Integer.parseInt(blogID));
        // 将 Java 对象转换成 json 格式的数据格式
        String jsonData = objectMapper.writeValueAsString(blog);
        resp.getWriter().write(jsonData);
    }
}

public class Check {
    public static User CheckLogin(HttpServletRequest req) {
        HttpSession httpSession = req.getSession(false);
        if (httpSession == null) {
            // 会话未创建出来，意味着用户未登录
            return null;
        }
        User loginUser = (User) httpSession.getAttribute("user");
        if (loginUser == null) {
            // 就算会话创建出来了，但是里面没有对象，也意味着用户未登录
            return null;
        }
        return loginUser;
    }
}

// 验证用户有没有登录
User loginUser = Check.CheckLogin(req);
if (loginUser == null) {
    System.out.println("当前用户未登录");
    // 若登录不成功，设置状态码为 403
    // 跳转页面的操作，应该在前端写
    resp.setStatus(403);
}

</body>
    <!-- 版心  -->
    <div class="mark">
        <form action="BlogWriting" method="POST" style="height: 100%;">
            <!-- 标题编辑区 -->
            <div class="headline">
                <input type="text" class="title" name="title">
                <!-- <button class="submit">发布文章</button> -->
                <input type="submit" class="submit">
            </div>
            <!-- mardown 编辑区 -->
            <div id="editor">
                <textarea name="content" style="display : none"></textarea>
            </div>
        </form>
    </div>
    <script>
        // 初始化编译器
        let editor = editormd("editor", {
            //这里的尺寸必须在这里设置，设置样式会被 editormd 覆盖掉
            width: "100%",
            //设置编译器高度
            height: "calc(100% - 60px)",
            //编译器的初始内容
            markdown: "# 在这里写下一篇博客",
            //指定 editor.md 依赖的插件路径
            path: "editor.md/lib/",
            // 加上这个选项之后，编辑器中的内容才会被放到 textarea 里面
            saveHTMLToTextArea: true
        });
    </script>
</body>

success: function(data, status) {
    let blog = data;
    // 博客标题
    let titleH3 = document.querySelector('.blog .title');
    titleH3.innerHTML = blog.title;
    // 博客格式化日期
    let dateDiv = document.querySelector('.blog .date');
    dateDiv.innerHTML = formatDate(blog.postTime);
    // // 单篇博客的内容
    // let contentDiv = document.querySelector('.blog .content');
    // contentDiv.innerHTML = blog.content;   
    // 把得到的 json 数据按照 markdown 的方式处理好，放到 id 为 content 的标签中
    editormd.markdownToHTML('content', {markdown: blog.content});
},