recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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

黄舟黄舟2814 Il y a quelques jours1831

répondre à tous(5)je répondrai

  • 巴扎黑

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

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

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

    répondre
    0
  • 迷茫

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

    同意 @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>
    

    répondre
    0
  • ringa_lee

    ringa_lee2017-04-10 14:58:05

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

    répondre
    0
  • 阿神

    阿神2017-04-10 14:58:05

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

    répondre
    0
  • ringa_lee

    ringa_lee2017-04-10 14:58:05

    可使用AngularJS

    répondre
    0
  • Annulerrépondre