如何使用 express js 处理 AJAX 请求答案

【问题标题】：How to handle AJAX resquest with express js如何使用 express js 处理 AJAX 请求
【发布时间】：2022-01-20 08:26:38
【问题描述】：

我正在尝试使用 ExpressJS 处理 ajax 请求，但是当我单击任何锚标记时，页面会完全重新加载并且不会在客户端收到手动 ajax 请求。

我需要当我点击任何这些链接时，它应该由客户端使用 fetch api 处理。

这是html结构

<header id="main-header">
  <nav>
    <ul>
      <li class="nav-bar"><a data-urlid="" href="/">Home</a></li>
      <li class="nav-bar"><a data-urlid="about" href="/about">About</a></li>
      <li class="nav-bar"><a data-urlid="achievements" href="/achievements">Achievements</a></li>
      <li class="nav-bar"><a data-urlid="gallery" href="/gallery">Gallery</a></li>
      <li class="nav-bar"><a data-urlid="contact" href="/contact">Contact</a></li>
    </ul>
  </nav>  
</header>

这是控制器

const home = (req, res) => {
   res.json({message:"success"})
};

这是获取主页的路由器

router.get("/", danceController.home);

尝试使用 vanilla js 处理 ajax 请求

const navBars = document.querySelectorAll(".nav-bar");

async function head(event) {
  event.preventDefault();
  const url = event.target.dataset.urlid;

    const responseData = await fetch(`/${url}`, {
        method: "GET",
        headers: {"Content-Type":"text/html"}}).then((response) => {
            console.log(response);
        });
    
    // console.log(responseData);
};

for (const navBar of navBars) {
    navBar.addEventListener("click", head)
}

【问题讨论】：

@jabaa — 这违反了Unobtrusive JS 的原则，鉴于代码使用了event.preventDefault，因此不应该这样做。
记录navBars。它可能是空的。这可能是 stackoverflow.com/questions/14028959/… 的副本，但您没有向我们展示您向我们展示的 HTML 和用于加载 JS 的 <script> 元素之间的关系。
您的问题标题非常具有误导性。问题是您一开始就没有发出 Ajax 请求。目前没有什么可处理的。
headers: {"Content-Type":"text/html"} 没有意义。您正在发出没有请求正文的 GET 请求，因此请求正文但该代码声称不存在的请求正文是 HTML 文档。

标签： javascript node.js ajax express

【解决方案1】：

尝试用'#'替换hrefs，那么你需要在将响应记录到控制台之前解析来自JSON的响应，即responseData应该看起来更像这样：

const responseData = await fetch(`/${url}`)
                           .then(response => response.json())
                           .then(response => {
                               console.log(response);
                           });

如果还是不行，请确保浏览器正在加载预期版本的 JS。

【讨论】：