当后端反一整个html页面内容时，该如何处理之document.write()

目前不分离的java项目，有一个翻页，之前是通过url地址传参来请求，数据直接返回在当前页面
但是后来因为需求改变，参数增加了很多，不再适合url请求，于是我们换成了ajax的post请求
请求成功，但是后端反的数据是一整个页面的html，因为之前一直没有前后端分离，后端接口不会传json，这就让我很方了
为了不大改，只有看前端有什么方法重新渲染了
既然能拿到页面，那我最开始的想法就是直接替换这个页面的内容
document.write()
没错就是这样，但后面遇到了两个小坑

//第一次的代码
 $.ajax({
            url:'<%=request.getContextPath()%>/project/proList',
            type:'post',
            dataType:'json',
            data:data,
            success : function(data){
              document.write(data.responseText);
            }
        })

这样写，发现什么都不对，最后根本进入不了success ，
然后我就写了error，想看看是哪里出错

//调试
$.ajax({
            url:'<%=request.getContextPath()%>/project/proList',
            type:'post',
            dataType:'json',
            data:data,
            success : function(data){
                document.write(data.responseText);
            },
            error:function(data){
        console.log(data)
            }
        })

这次意外发现请求最后是进入了error，并且打印出来后端反的html页面
查了写资料，原来后端直接反页面，数据就不是json，自然就会异常进入error,既然后端没办法改，那我们也只有曲线救国，不走success 就不走，我们就用error渲染

//继续调试
$.ajax({
            url:'<%=request.getContextPath()%>/project/proList',
            type:'post',
            dataType:'json',
            data:data,
            success : function(data){
                //因为返回了所有的html数据，不是json格式，所以不进入success而是进入error
            },
            error:function(data){
        document.write(data.responseText);
            }
        })

这样写，OK，数据出来，可以翻页了，但是问题又来了，我们翻一页正常，多次翻页后会发现之前的页面内容还在，一直在叠加，这样可不行哦
度娘了下

如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，
则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。
在异步引入的js和DOMContentLoaded或load事件的回调函数中运行document.write()，
运行完后，最好手动关闭文档写入（document.close()）。

方法找到，继续修改

 $.ajax({
            url:'<%=request.getContextPath()%>/project/proList',
            type:'post',
            dataType:'json',
            data:data,
            success : function(data){
                //因为返回了所有的html数据，不是json格式，所以不进入success而是进入error
            },
            error:function(data){
              document.write(data.responseText);
              document.close();
            }
        })

大功告成

自从前后端不分离处理页面后，我深深感受到了坑，但没办法，为了我热爱的工作.........

参考：https://segmentfault.com/a/1190000007958530

最后编辑于：2019.01.03 16:49:55