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

[Aidea]

比如打开用户中心，不使用新窗口，也不刷新当前页面，而是以弹出 modal 框的方式显示，但是这个页面的内容不想提前写在当前页。
如果是将用户中心的内容单独写在一个 html 文件里，有没有什么技术能够将这个单独 html 的内容动态插入到当前的页面呢？排除 iframe，谢谢

[251243021]

发送个异步请求.然后把请求内容插入?

[hoyixi]

Ajax 获取（数据形式是 html 还是 json 还是 xml 等等，随你开心），然后插入当前页面某个地方还是 modal，想怎么展示就怎么展示（ javascript 操作 DOM ）

[Aidea]

@251243021
@hoyixi
这种方式可行是可行，但是要插入的页面结构复杂，包括相关的样式和脚本，而且这样的页面有很多个，这么做的话维护起来很麻烦

[codehz]

最简单的方法：HTML Modules ( https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md )
问题在于他还在草案阶段）
现在能用的方法： 手工 fetch，然后直接 set HTML ）
还能把 HTML 转换为一堆 document.createElement 的 js 然后直接加载）
不过其实如果用了某些主流前端框架的话，这个应该就不是什么问题了）

[molvqingtai]

配合 webpack 使用 import ( )

[hoyixi]

@Aidea #3 当然麻烦

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

方法就是这个套路，本质都一样。用哪个、怎么用，看你具体问题灵活应用

[NCry]

我觉得 vue 或者 angular 等单页应用框架可以满足你的需求。

[TYchen]

建议引入 vue.js 当做类库使用。 或者用 HTML 的 temple

[Aidea]

@codehz
@molvqingtai
@hoyixi
@NCry
@TYchen
感谢各位的回复，启发很大，谢谢！

[yamedie]

如果由服务端返回 DOM, js 代码, CSS 样式, 可以参考服务端保存富文本由前端渲染的实现方法, 一个 jQuery 的.html()就足够用了, 后台通过接口返一个 div 标签的长文本, div 标签里也可以放 script 标签和 style 标签的

[dfourc]

@yamedie #10 直接 ajax 请求 html 文件也可以的吧，这样就不用后台返回了，拿到 html 也可以插啊

[zqx]

把用户中心改造成单页应用，打包发布到私有 npm
在当前项目动态 import 组件，放到模态框显示

[beastk]

我反正是 ajax 请求，然后 modal

[ffeii]

webpack 按需加载

[also24]

第一反应就是 pjax

[Yishanshan]

A 通过 ajax 然后 get 一个 HTML ？ datatype 选择 HTML，结合 jQuery 会比较好用

[james122333]

原来我帮公司实现的有 pjax 的功能... 整个整套的... js 载入 css 清除通通有 看来我真的太佛心 薪水应该领高一点

[dartabe]

模版引擎?

[demonzoo]

加载纯数据 json data，然后用模板工具生成 div 内容，或者再复杂一点的话用 vue

[zivyou]

单页面应用了解一下。js 完成所有页面的渲染加载 当然这里面会有比较多的细节问题 前端开发领域已经总结了一整套完成的工具链和方法 框架+模版之类的 可以了解一下

ps:为啥我一个 crud boy 会知道这个。。

[himesens]

pjax 完全符合，如果不想折腾或者引入其它东西的话就 ajax，最多就是烦，不复杂，