如何通过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




