我想通过Ajax加载新闻列表的“详细信息”视图。重新加载页面不是一个好的UX-在列表保留在左侧(或任何位置)且仅更改文章的详细信息视图的同时,旧的详细信息会逐渐消失。
问题:
我正在尝试使其工作: https://gist.github.com/markhowellsmead/98de3dbaaec2faf52e0863907b5e403e
还查看: http://unterricht.lacheiner.net/index.php?id=217 这是加载更多新闻列表项目的示例
我还希望获得完整的详细信息URL,并使用该URL从具有唯一的仅详细信息模板的页面加载详细信息,例如 www.example.com/?type=9999 仅有细节
最后查看URL路由 http://www.softfinity.com/blog/an-simple-introduction-to-url-routing/
答案 0 :(得分:0)
我不建议这样做,因为这会破坏默认的浏览器行为(例如来回),将使直接链接到新闻项等变得困难。但是,如果您确实想这样做,我可以通过添加a-tag的click
事件,用于链接到列表视图中的详细信息页面,获取URL,使用ajax获取详细信息页面,然后仅获取我想要的页面部分并显示它。 / p>
例如(使用jQuery):
$('div.newsList div.item a').click(function() {
doStuffToShowItsLoading();
//
$.ajax(this.href, {
dataType: 'html',
success: function(jqXHR, textStatus) {
var detailHtml = $(jqXHR.responseText).find('div.newsDetails');
$('div.newsDetail').html(detailHtml);
doStuffToStopShowingItsLoading();
},
error: function() {
alert('Something went wrong');
}
});
return false;
});
这样,搜索引擎或禁用JavaScript的人仍然可以跟踪链接。