后端返回的HTML代码字符串怎么能自动渲染到前端页面

Question

前台用 form 表单的形式提交数据，后台通过 res.render(用的ejs) 可以正常渲染前端的页面，后台代码如下：

router.post('/classifyadd', (req, res) => {
    let {classifyname} = req.body;
    Classify.create({
        name: classifyname
    }).then(doc => {
        responseData.msg = doc.name;
        
        res.render('admin/frame', {
            page: 'successtip'
        });
    });
});

问题是：当我用 ajax 的形式提交数据，后台同样的写法，前端却不能渲染，我看了响应头也确实是 Content-Type: text/html; charset=utf-8？

我知道前端拿到数据后可以通过 innerHTML 的形式塞进页面，但不确定这是不是一个正确的方法？

还是用 AJAX 请求时，后端就不能直接渲染(res.render)，只能返回数据，前端拿到数据后再操作DOM，还有其他方法吗？

同样的问题链接，还没有一个好的方案。谢谢各位！

Answer 1

应该只返回纯数据，前端再渲染成 HTML。直接 innerHTML 有可能导致 XSS 攻击。

Answer 2

你这前一句说innerHTML不是正确的方式，后一句又要操作DOM，过去的数据塞进DOM树。

悟: 你该不会是甲方吧！

Answer 3

这里纠正你一下，html形式的其实是是当初为了返回XML格式的数据。本来ajax就是为了异步交互，返回轻量数据，自己渲染。你直接怼个页面回来。那你还要啥ajax。直接表单提交岂不美滋滋。

当然，不是说你这样做不可以。你就说你再后端组好了，直接过来了。也行。方案就是innerHTML写进去。

如果你是不明白怎么交互，可以参考一下我自己的文章 简单的前后端交互流程（AJAX）