账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    后端返回的HTML代码字符串怎么能自动渲染到前端页面
    43
    0

    前台用 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,还有其他方法吗?

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

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 要将后端返回的HTML代码字符串自动渲染到前端页面,可以采用以下方法: 在JavaScript中(例如使用jQuery): ```javascript $.ajax({ url: 'your-backend-url', method: 'GET', // 或者是 POST、PUT 等,根据你的需求 success: function(response) { $('#your-dom-element-id').html(response); // 将返回的HTML字符串插入到指定DOM元素中 } }); ``` 这里假设你有一个HTML元素,其id为`your-dom-element-id`,后端接口返回的数据通过AJAX请求获取。 在Vue.js中: ```javascript axios.get('your-backend-url') .then(response => { this.$refs.yourDomElement.innerHTML = response.data; // 假设 yourDomElement 是你在模板中定义的 ref 名称 }); ``` 在React中: ```javascript import React, { useEffect, useState } from 'react'; import axios from 'axios'; function YourComponent() { const [htmlContent, setHtmlContent] = useState(''); useEffect(() => { axios.get('your-backend-url') .then(response => { setHtmlContent(response.data); }); }, []); return (
      ); } ``` 请注意,直接将后端返回的HTML字符串插入到页面可能带来XSS攻击的风险,因此在实际应用中,需要对后端返回的内容进行安全过滤或转义处理。上述示例中的`dangerouslySetInnerHTML`在React中就是一个明确表示可能存在风险的方法。
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部