ajax - TYPO3 (v9.5) 使用 Ajax 加载新闻扩展

Question

我想通过 Ajax 加载新闻列表的详细信息视图。页面重新加载不是一个好的用户体验 - 最好让旧的细节淡出，而列表保持在左侧（或任何地方）的位置，并且只是文章的细节视图发生变化。

问题：

• SEO可能会崩溃
• 如果不扩展新闻，文章的唯一 URL 可能会成为问题

我试图让它工作： https ://gist.github.com/markhowwellsmead/98de3dbaaec2faf52e0863907b5e403e

还看： http ://unterricht.lacheiner.net/index.php?id=217 这是加载更多新闻列表项的示例

我还在考虑获取完整的详细信息 URL，并使用它从具有唯一详细信息模板的页面加载详细信息，例如 www.example.com/?type=9999，该模板仅包含详细信息

最后看看 URL Routing http://www.softfinity.com/blog/an-simple-introduction-to-url-routing/

标签： ajaxtypo3tx-newstypo3-9.x

Answer 1

我不建议这样做，因为这会破坏默认的浏览器行为，例如向后和向前，将难以直接链接到新闻项目等。但如果你真的想这样做，我会通过添加一个click事件来做到这一点列表视图中详细页面链接的a-tag，获取URL，使用ajax获取详细页面，然后只获取我想要的页面部分并显示它。

例如（使用 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 的人仍然可以跟踪这些链接。