javascript - 怎么做到不用ajax去无刷新跳转页面-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 怎么做到不用ajax去无刷新跳转页面

黄舟 2017-04-10 14:56:05

[JavaScript讨论组]

2155

我现在有三个页面，都是相关联的，点击跳转的
现在技术要求是点击不要有刷新，让客户感觉是在同一个页面里操作完成这三个页面
他现在也没有提供什么接口和请求我就三个静态页面，
我该怎么弄？？？？？

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(5)

巴扎黑2017-04-10 14:58:05 5楼

把三个页面代码放在一起，利用css的display控制显示隐藏？

如果用angular来做倒是很好实现的

赞 +0

添加回复

迷茫2017-04-10 14:58:05 4楼

同意 @TooBug 的方法，基本上就是点击的时候屏蔽掉默认跳转，然后使用 $.load 加载页面内容，该方法能非常方便的加载页面的部分内容，最后替换掉页面元素即可。我这里用原生的写一个 DEMO:

<p>我是本页内容</a>
<button href="http://xx.com/page/you_need_load" class="btn">载入下一页</button>

<script type="text/javascript">
function getHTML( url ) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest;
        xhr.responseType = "document";
        xhr.open("GET", url, true);
        xhr.onload = function() {
            xhr.status === 200 ? resolve( xhr.response ) : reject( Error( xhr.status ) );
        }
        xhr.onerror = function() {
            reject( Error( xhr.status ) );
        }
        xhr.send( null );
    })
}
function loadPage(e) {
    e.preventDefault();
    getHTML( this.href ).then( function( html ) {
        //可以直接复写整个页面的 HTML 代码，也可以复写一部分
        document.querySelector("html").outerHTML = html.outerHTML;
    } 
    this.removeEventListener("click", loadPage);
}
document.querySelector(".btn").addEventListener("click", loadPage);
</script>

赞 +0

添加回复