改變頁面而不刷新 - 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

回答

相關問題