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

我一直在寻找一段时间没有得到我的问题的答案，但没有任何运气。改变页面而不刷新 - Laravel/Ajax

我很有效地试图复制Soundcloud的导航结构，您可以点击一个链接，它会重定向页面而不刷新使用Ajax/jQuery，但不会重复内容，如果用户刷新，页面仍然在寻找正常。

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

另一件我也试图得到这个工作的是，如果我从视图中删除主模板，它不会显示内容 - 但说它做了，它不会有样式如果我是去直接到该页面，它会加载而不造型等

这是jQuery的工作，通过页面正常拉：

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

我希望这是有道理的，如果任何更多的信息是必要的我会尽我所能提供它！

非常感谢！

马特

EDIT--

这是仍然有效。我已经做了更多的探索，并且想到了另一种方式，人们可能会发现更多的光芒。如果我换的看法扩展主模板的东西，如：

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

那么这只会显示在该视图中的主模板，如果通过AJAX所请求的页面，对不对？我不确定这是否正确，但值得一试。

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

来源

2016-05-08 Matty Clarke

对于你想要达到的目标，你需要的不仅仅是jQuery和Ajax。您需要一个适当的JavaScript框架结合一些模板。

来源

2016-05-08 16:10:55 Pascal

尝试使用jQuery插件pjax。有了这个插件，你可以创建任何网站与AJAX导航。

来源

2016-05-08 18:46:35

我可以给你一些想法。

假设你的总体布局正在寻找这样的：

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

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

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

对于你必须建立两种观点，一个每个页面包含应在“内容”部分中去的东西，对方表示包括前一个延伸的主布局，这样的：

@extends(layouts.master) 

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

然后，在仅部分时请求来自Ajax的同时发送完整的页面时请求是正常的控制器返回。

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

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

    } 

}

假设只有带班“阿贾克斯”链接不应该刷新页面，则可以使用jQuery函数‘$不用彷徨’返回新的HTML。

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

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

当然，您需要使用History API来更新网址。

希望它有一点帮助。

来源

2016-05-08 21:27:01

嗨，谢谢你的回复，并且很抱歉。对每一个页面都有两个视图效率不是很低吗？考虑到我的网络应用程序将会相对较大。如果通过Laravel通过ajax/jq请求页面，然后显示适当的内容，是否更容易指定？不知道这将如何工作，但它似乎符合我的头哈哈。再次感谢！ –

是的，或者你可以创建只有部分和一个“一般”的看法，你动态地包含每个部分。 –

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

来源

2016-05-11 20:35:20

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

回答

相关问题