首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Coding
V2EX  ›  程序员

有没有不刷新页面加载复杂 div 的方法?

  •  
  •   Aidea · 104 天前 via Android · 2041 次点击
    这是一个创建于 104 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如打开用户中心,不使用新窗口,也不刷新当前页面,而是以弹出 modal 框的方式显示,但是这个页面的内容不想提前写在当前页。
    如果是将用户中心的内容单独写在一个 html 文件里,有没有什么技术能够将这个单独 html 的内容动态插入到当前的页面呢?排除 iframe,谢谢
    21 回复  |  直到 2019-09-02 11:45:46 +08:00
        1
    251243021   104 天前   ♥ 1
    发送个异步请求.然后把请求内容插入?
        2
    hoyixi   104 天前   ♥ 1
    Ajax 获取(数据形式是 html 还是 json 还是 xml 等等,随你开心),然后插入当前页面某个地方还是 modal,想怎么展示就怎么展示( javascript 操作 DOM )
        3
    Aidea   104 天前 via Android
    @251243021
    @hoyixi
    这种方式可行是可行,但是要插入的页面结构复杂,包括相关的样式和脚本,而且这样的页面有很多个,这么做的话维护起来很麻烦
        4
    codehz   104 天前   ♥ 1
    最简单的方法:HTML Modules ( https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md )
    问题在于他还在草案阶段)
    现在能用的方法: 手工 fetch,然后直接 set HTML )
    还能把 HTML 转换为一堆 document.createElement 的 js 然后直接加载)
    不过其实如果用了某些主流前端框架的话,这个应该就不是什么问题了)
        5
    molvqingtai   104 天前 via Android   ♥ 1
    配合 webpack 使用 import ( )
        6
    hoyixi   104 天前   ♥ 1
    @Aidea #3 当然麻烦

    直接加载 html 是很久以前的做法,后来发展到加载纯数据然后使用 Mustache、Handlebars 之类的模板展示;再到现在,Vuejs/Reactjs 来了

    方法就是这个套路,本质都一样。用哪个、怎么用,看你具体问题灵活应用
        7
    NCry   104 天前   ♥ 1
    我觉得 vue 或者 angular 等单页应用框架可以满足你的需求。
        8
    TYchen   104 天前   ♥ 1
    建议引入 vue.js 当做类库使用。 或者用 HTML 的 temple
        9
    Aidea   104 天前 via Android
    @codehz
    @molvqingtai
    @hoyixi
    @NCry
    @TYchen
    感谢各位的回复,启发很大,谢谢!
        10
    yamedie   104 天前
    如果由服务端返回 DOM, js 代码, CSS 样式, 可以参考服务端保存富文本由前端渲染的实现方法, 一个 jQuery 的.html()就足够用了, 后台通过接口返一个 div 标签的长文本, div 标签里也可以放 script 标签和 style 标签的
        11
    galikeoy   104 天前
    @yamedie #10 直接 ajax 请求 html 文件也可以的吧,这样就不用后台返回了,拿到 html 也可以插啊
        12
    zqx   104 天前 via Android
    把用户中心改造成单页应用,打包发布到私有 npm
    在当前项目动态 import 组件,放到模态框显示
        13
    beastk   104 天前 via iPhone
    我反正是 ajax 请求,然后 modal
        14
    ffeii   104 天前 via iPhone
    webpack 按需加载
        15
    also24   104 天前 via Android
    第一反应就是 pjax
        16
    Baymaxbowen   104 天前 via Android
    A 通过 ajax 然后 get 一个 HTML ? datatype 选择 HTML,结合 jQuery 会比较好用
        17
    james122333   103 天前
    原来我帮公司实现的有 pjax 的功能... 整个整套的... js 载入 css 清除通通有 看来我真的太佛心 薪水应该领高一点
        18
    dartabe   103 天前
    模版引擎?
        19
    demonzoo   103 天前
    加载纯数据 json data,然后用模板工具生成 div 内容,或者再复杂一点的话用 vue
        20
    zivyou   103 天前
    单页面应用了解一下。js 完成所有页面的渲染加载 当然这里面会有比较多的细节问题 前端开发领域已经总结了一整套完成的工具链和方法 框架+模版之类的 可以了解一下

    ps:为啥我一个 crud boy 会知道这个。。
        21
    himesens   103 天前
    pjax 完全符合,如果不想折腾或者引入其它东西的话就 ajax,最多就是烦,不复杂,
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2285 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 27ms · UTC 12:49 · PVG 20:49 · LAX 04:49 · JFK 07:49
    ♥ Do have faith in what you're doing.