前端怎么实现ajax返回而不重新载入数据？
滑动商品列表后，进入商品详情，返回去后商品列表又重新载入数据，怎么解决
vue-router，前端路由
需要后端支持
前端的做法是使用history介面
History?developer.mozilla.org
原理是通过hack所有链接的跳转事件，使得跳转不再卸载当前页面而是通过ajax获取新页面的内容进行手动切换页面，同时使用window.history介面进行手动切换url。
用户在返回列表页时会触发window.onpopstate事件，在此事件中将之前保存下来的列表页面重新载入，并滚动到之前保存的相对位置。
window.onpopstate = function(event) {
if ( typeof page_events === object ) {
page_events.deactivated();
}
var obj = event.state;
$( body ).html( $( obj.content ) );
$( window ).scrollTop( obj.scroll );
init();
if ( typeof page_events === object ) {
page_events.activated();
}
}
$( a.item[href], a.gotodetail[href] ).on( click, function(e) {
e.preventDefault();
var url = $( this ).attr( href ).replace( .html, .ajax_h5_mode.html );
var obj = {
scroll : $( window ).scrollTop(),
content: $( body ).html(),
inject : inject,
};
window.history.replaceState( obj, , window.location.href );
window.history.pushState( obj, , $( this ).attr( href ) );
if ( typeof page_events === object ) {
page_events.deactivated();
}
$.ajax( {
url: url,
cache: false,
dataType : html,
} ).then( function( response ) {
$( window ).scrollTop( 0 );
$( body ).html( $( response ) );
if ( typeof page_events === object ) {
page_events.activated();
}
} ).fail( function() {
console.log( 获取页面错误 );
} );
} );
把获取的数据存起来，在Ajax之前做一个判断，如果这个数据不为null，则不请求，有空上 demo
这个时候你就要在第一次请求的时候就要把返回的数据保存起来，然后每次进入列表前先判断你保存的地方有没有数据，如果没有的话才请求，有的话就不请求。总之就是这么一个道理。不懂再问吧
重不重新载入不是你控制的吗
可以了解下pjax，用的就是上面 @赵诣 提到的history hack方案。
defunkt/jquery-pjax?github.com
又demo吗
推荐阅读：
