首页 > 怎么做到不用ajax去无刷新跳转页面

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

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


三个页面同时加载到一个页面上,通过display来控制显示哪个。


可使用AngularJS


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

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


提前把数据取出来,用CSS控制吧


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

<div>我是本页内容</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>
【热门文章】
【热门文章】