如何避免js拼接html片断

背景

最近在作一个项目，其中数据的加载比较耗时，刚开始的方案是：

方案一

①，当用户点进来时，先给其相应出基本页面，价格数据用ajax请求后台获取；

②，当ajax有返回数据时则利用js拼接html

结果：

用户体验是上去了，但代码就很差维护了，在js里拼html也太难看了，不利于后期维护

因而我开始百度，有什么更好的解决方案，我坚信确定不止我一我的遇到这种问题，网上必定会有更好的解决方案的，

带着这种信念，我找到了方案二；

方案二

利用vue或angularjs 实现数据绑定到html上。

结果：

此方案的确能够，但须要学一门前端框架，学习须要付出成本

有时遇到问题，在百度上也难以找到答案，我有点犹豫；

昨天在逛开源中国时，发现我的博客数据是经过ajax来进行分页的，且返回来的是html片断

这样的话，方案三就呼之欲出了，如图

方案三

仍是跟方案一同样，只是ajax请求返回来的是已经拼接好的html片断，

即，ajax照常发起数据请求，只是后台controller不加 @ResponseBody注解，而是跳转到页面

而后ajax获得的响应就是html片断了，直接给要展现html标签设置其html便可

结论：

只是我我的的观点，我更喜欢方案三，由于项目一开始并无使用方案二的前端框架，并且方案三简单易实现。