怎么做到不用ajax去无刷新跳转页面
我现在有三个页面，都是相关联的，点击跳转的
现在技术要求是点击不要有刷新，让客户感觉是在同一个页面里操作完成这三个页面
他现在也没有提供什么接口和请求我就三个静态页面，
我该怎么弄？？？？？
胖次上的小熊
9 years, 8 months ago
Answers
同意
@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>
糖醋无莭操
answered 9 years, 8 months ago