You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何通过Ajax渲染EJS?请求成功但EJS未渲染的求助

解决Ajax请求后EJS模板未渲染的问题

看起来你已经走对了大部分流程——服务器端已经成功执行了res.render(从控制台打印的"test"可以确认),但前端没有处理服务器返回的渲染后的HTML内容,所以页面才没变化。

问题根源

当你用Ajax发送请求时,服务器返回的渲染好的EJS模板内容会被传递到success回调函数的data参数里,但浏览器不会自动把这个内容渲染到页面上,你需要手动编写代码来处理这个返回值。

具体修改方案

1. 更新前端Ajax的success回调

把服务器返回的HTML插入到页面的指定容器中(比如你页面里有一个用来展示内容的<div id="page-content"></div>):

var s_email = $('#email').val();
$.ajax({
  data : {email : s_email},
  url : "\/process\/Oauth_login",
  type : "POST",
  success : function(data){
    // 将返回的渲染后的HTML插入到页面容器中
    $('#page-content').html(data);
    // 如果需要替换整个页面内容,可以用:
    // document.body.innerHTML = data;
  }
});

2. 服务器端的小优化(可选)

服务器端的res.render方法已经会自动设置正确的Content-Type响应头为text/html,所以你不需要额外处理,当前的服务器代码在成功分支是没问题的。

补充说明

如果你其实是想跳转到新页面展示lobby.ejs,那其实不需要用Ajax,直接用表单提交或者修改location.href的方式会更简单,比如:

// 用表单提交的方式(假设你有一个id为login-form的表单)
$('#login-form').submit();

// 或者手动构造跳转:
window.location.href = '/process/Oauth_login?email=' + encodeURIComponent(s_email);
// 注意这种方式需要服务器端处理GET请求,或者保持POST的话用表单更合适

但如果确实需要用Ajax(比如不想刷新整个页面),那按照第一步修改success回调就可以解决问题啦。

内容的提问来源于stack exchange,提问作者EVADA

火山引擎 最新活动