Laravel：ajaxと複数のコントローラーでdivを変更する

AJAXでdivのコンテンツを変更したい（私はリンクをクリックするとすべてのページをリロードしたくない）、いくつかの文書を見つけたしかし、私は "静的"なソリューションしか見ていませんでした（ "これをクリックすれば"ハードコードされていますが、プロジェクトの最下部に3000行のスイッチケースを使いたくない）。Laravel：ajaxと複数のコントローラーでdivを変更する

誰かがオン・クリックにコントローラー、アクション、およびパラメーターを与えるだけの「ダイナミック」ソリューションを提供することができ、jqueryルーターは手を加えずにルーティングを行います。

私のコード例：

<!DOCTYPE html> 
<html lang="{{ app()->getLocale() }}"> 
    <head> 
     @include('includes.head') 
    </head> 
    <body> 
     <div id="header"> 
     <nav id="navbar" class="navbar navbar-default"> 
      <ul class="nav nav-tabs navbar-right"> 
       <li> 
        <a action="[email protected]" params="[a => 24, b => 52]"> 
         <button type="button" class="btn btn-link">First Example</button> 
        </a> 
       </li> 
       <li> 
        <a action="[email protected]" params="[id => 1, newValue => 42]"> 
         <button type="button" class="btn btn-link">Second Example</button> 
        </a> 
       </li> 
     </nav> 
     </div 
     <div id="app"> 
      <!-- This will be changed by the router --> 
     </div> 
     <footer class="container navbar"> 
      @include('includes.footer') 
     </footer> 

     <!-- Scripts --> 
     <script src="{{ asset('js/app.js') }}"></script> 
    </body> 
</html>

コントローラのアクション

class FirstExampleController extends Controller{ 

    public function firstExample(Request $request){ 
     $a = $request -> a; 
     $b = $request -> b; 

     $c = $a + $b; 

     return $c; 
    } 
} 

class SecondExampleController extends Controller{ 

    public function secondExample(Request $request){ 
     $id = $request -> id; 
     $newValue = $request -> newValue; 

     //database operation where the id's object's new value will be $newValue 

     return $this->showItems; 
    } 
}

出典

2017-11-02 Feralheart

は、この方法のようにそれを実行し、

まず第一に、各buttonにidを追加して、だけでなく、内部リンクで<a>ajaxのセレクタとして使用でき、0にはdata-*の属性を使用しますhere

$('#buttonID').click(function(e) { // e=event 
     e.preventDefault(); 
     var param1 = $(this).data("param1") 
     var param2 = $(this).data("param2") 
     // so on.... 
     $.ajax({ 
      url: "/routeNames", 
      type: "GET"/"POST", 
      data: { data1: param1, data2: param2 }, 
      success: function(response) { 
      console.log(response); 
    } 
    }); 
});

NOTEのデータは、属性についてのあなたがより多くを読むことができます：あなたが代わりにroutesを使用して、この[email protected]のように指定する必要はありませんroutesについての詳細を読み、ちょうどルートの名前またはルートのURIを指定します。

PS：これは単なる構造体の基本構造です。あなたはそれを最大限に活用するためにR & Dをする必要があります。

出典

2017-11-02 19:51:27

R＆Dの意味は？私はどこにリンク/ボタンがたくさんあるかいくつかのビューを持っています。このjQueryスクリプトを1回だけ含める機会はありますか？ – Feralheart

いいえ、パラメタはあなたの要求によって異なりますので、スクリプトを作成してそれを含める場合は、そのタイプをすべて維持する必要があります。あなたが要件に縛られていない場合は、あなたは、必要性を満たすことができるvue、反応または角度jsを使用することができます。 –

あなたが私の答えに満足すればそれを受け入れることができます;） –

Laravel：ajaxと複数のコントローラーでdivを変更する

答えて

関連する問題