当后端反一整个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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容