通过 fetch API 触发时，EJS 视图不会呈现答案

【问题标题】：EJS view will not render when triggered via fetch API通过 fetch API 触发时，EJS 视图不会呈现
【发布时间】：2021-03-20 21:55:00
【问题描述】：

在我的客户端 javascript 中，我正在使用以下函数，该函数由 onclick 事件触发

function submitForm(event) {
const data = { name, image_url };

console.log(data);

fetch('/', {
    method: 'POST', 
    headers: {
        'Content-Type': 'application/json',         
    },      
    body: JSON.stringify(data),
});
}

上面的函数向应用程序的 expressJS 后端发送一个 post 请求，该请求触发另一个应该呈现两个 EJS 视图之一的函数。这里是 expressJS 函数

router.post('/', function (req, res) {
console.log('hitting router post');
var { name, imageURL } = req.body;
console.log(name, imageURL);
if (nicknameIsAvailable(name)) {        
    let user = {
        nickname: name,
        id: '',
        image: imageURL,
    };
    console.log("new user connecting")
    res.cookie('nickname', name, { signed: false });
    res.render('chat', { nickname: name });
} else {
    console.log('rejecting user ' + name + ' is already taken');
    res.render('index', { message: userTakenErrorMessage });
}
});

问题是 res.render 实际上并没有渲染 EJS 视图。我认为正在发生的事情是将视图的 HTML 标记发送回客户端 javascript。期望的行为是它使用给定的参数呈现“聊天”或“索引”视图。我怎样才能做到这一点？

如果这种方法不起作用，那么我可以使用什么方法在不使用表单的情况下将一些数据添加到请求的正文中，然后让该请求触发呈现视图？

【问题讨论】：

好吧，“渲染视图”是什么意思？您的代码肯定会呈现视图，问题是，您想对呈现的 html 做什么？通常，当您将 HTML 发送回客户端（发出 POST 请求的客户端）时，它必须以某种方式处理它。那么 - 应该如何处理呈现的 HTML？如果你想在另一个页面上显示一些数据，可以使用 res.redirect(....)。
...或者 - 您将 HTML 附加到某个 div，例如 element.innerHTML = 您来自发布请求的数据...
我的意思是渲染的 HTML 没有显示在浏览器中。我想要对 HTML 数据执行的操作是让它显示在浏览器的新页面中，并让我在浏览器中可用的发布路由中传递的参数。我的全部观点是，我刚刚解释的行为发生在 HTML 表单发布触发相同的方法时。当我尝试通过 fetch API 模拟同样的事情时。 HTML 数据作为响应发回，不会显示在浏览器中。我想获得与提交表单相同的行为，而实际上没有表单

标签： javascript express

【解决方案1】：

这是一个 ajax 请求，您将在 fetch 函数的已解析承诺中收到呈现的 HTML。要显示响应内容，请使用：

fetch(...).then(res => res.text()).then(htmlStr => {
  document.open();
  document.write(htmlStr);
  document.close();
})

【讨论】：

好的，所以表单提交不是 ajax 请求？那是什么样的要求呢？以及如何在不使用实际 HTML 表单的情况下模拟表单请求所做的相同事情
表单提交不是 ajax 请求。要支持 Form 在服务器上提交请求，请将 express url-encoded 中间件添加到应用程序。然后，无论您将呈现（发送）什么作为响应，浏览器都会刷新并显示您作为响应发送的内容。
这不是问题所在。问题是“如何在不创建表单的情况下使用 javascript 发送表单提交”我希望能够模拟浏览器在使用客户端 javascript 将表单发送到服务器并且不创建 HTML 表单
没有表单，您将无法发送帖子请求。您必须使用表单或ajax。或者，您可以在查询字符串中设置值并将页面 URL 设置为该请求。它将向您的服务器发送获取请求，您必须从查询字符串中获取数据。虽然这不是一个好习惯。