Question

我一直在寻找一段时间没有得到我的问题的答案，但没有任何运气。

我有效地尝试复制Soundcloud的导航结构，就像您点击链接一样，它会重定向页面而不使用Ajax / jQuery进行刷新，但不会重复内容，如果用户刷新，页面仍然看起来正常。

我遇到的问题是，我有一个扩展所有视图的主模板，所以当我打电话来浏览页面时，它会在div中复制页面我推动它也。这导致从主模板中拉出两个标题/侧边栏等。

我还试图让其工作的另一件事是，如果我从视图中删除主模板，它就不会显示内容 - 但是说它确实如此，它不会＆＃39 ;如果我要直接去那个页面，它会有样式，它会在没有样式等的情况下加载。

这是正确运行页面的工作jQuery：

JQ

$(".main-nav li a").click(function(e) {
    e.preventDefault();
    var href = $(this).attr("href");
    $(".content-container").load(href);
});

我希望这是有道理的，如果需要更多信息，我会尽力提供！

万分感谢！

马特

修改 -

这仍然有效。我已经做了一些更多的挖掘，并想到了另一种方式，人们可能会更多的光。如果我使用类似的东西在视图上包装扩展主模板：

if(!$request->ajax())
@extends('master')
@endif

如果通过ajax请求页面，那将只显示该视图上的主模板，对吗？我不确定这是否是正确的方法，但值得一试。

像往常一样，非常感谢任何帮助！

Answer 1

尝试使用jQuery插件pjax。使用此插件，您可以使用ajax导航创建任何网站。

Answer 2

对于您要实现的目标，您需要的不仅仅是jQuery和Ajax。您需要一个合适的JavaScript框架和一些模板。

Answer 3

我可以给你一些想法。

假设您的主布局看起来像这样：

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <header>
            header
        </header>

        <main id="page-main">
            @yield('content')
        </main> 

        <footer>
            footer
        </footer>
    </body>
</html>

对于每个页面，您必须构建两个视图，其中一个视图包含应该包含的内容＆＃34;内容＆＃34;部分，另一个包括扩展主布局的前一个部分，如：

@extends(layouts.master)

@section('content')
    include partial here
@endsection

然后在Controller中，当请求来自Ajax时，仅返回部分，而当请求正常时，则返回整页。

Class MyController extends Controller{
    public function action1(Request $request){
        // code here

        return ($request->ajax() ? view('partial') : view('fullpage'));

    }

}

假设只有类＆＃34; .ajax＆＃34;的链接不应该刷新页面，你可以使用jquery函数＆＃34; $。得到＆＃34;返回新的HTML。

$("body").on('click','.ajax',function(){
    var url = this.href;
    $.get(url, function(data){
        $("#page-main").html(data);

        //history manipulation here
    });
    return false;
});

当然，您需要使用The Zombie DirectX SDK来更新网址。

希望它有所帮助。

Answer 4

我在通过ajax加载页面时不需要显示的部分使用@if(!Request::ajax())来修复此问题。

更改页面而不刷新 - Laravel / Ajax

4 个答案: