Laravel 5はAjaxで接続しますか？

Question

私のコントローラ取り外し機能にこのlaravelコードがあります。

$input = Input::all(); 
    $product= Products::findOrFail($input['product_id']); 
    $product->tags()->detach($input['tag_id']); 
    $product= Products::where('customer_id', Auth::user()->customers_id)->get(); 

    return view('products.tagsdelete', [ 
      'products' => $product, 
     ]); 

これは問題なく動作し、ピボットテーブルからタグの表現を削除します。唯一のことは、自分のビューで削除ボタンを押すたびにページをリロードしたくないということです。

（もちろん私は、ユーザーが削除したいすべてのタグの選択を行うことができますが、私は、Ajaxと一緒に暮らすこれにしたい）

私の問題は、私が離脱で私を助け何かを見つけることができなかったです

laravel + Ajaxから私はJavascriptとJqueryでかなり大丈夫ですが、Ajaxはまだ私にとって新しいことです。

だから誰でも助けてくれますか？私は本当に立ち往生している。

public function detach() 
    { 
    $input = Input::all(); 
    $product= Products::findOrFail($input['product_id']); 
    $product->tags()->detach($input['tag_id']); 
    $product= Products::where('customer_id', Auth::user()->customers_id)->get(); 
} 

私のボタン：コードの下部に

<button type="submit" class="delete-tag-btn" data-product_id="{{ $product->id }}" data-tag_id="{{ $tag->id }}"><i class="glyphicon glyphicon-trash"></i></button> 

:)

@Wiriya Rungruang

現在のコントローラコードあなたの時間を割いて

感謝JS：

<script> 
    $(".delete-tag-btn").on('click', function(){ 
     var url = "{{ route('detach') }}"; // Url to deleteTag function 
     url += "product_id=" + $(this).data('product_id'); 
     url += "&tag_id=" + $(this).data('tag_id'); 

     // Now url should look like this 'http://localhost/deletetag?product_id=2&tag_id=5 
     // Send get request with url to your server 
     $.get(url, function(response){ 
      alert("success"); 
     }); 
    }); 
</script> 

Answer 1

まず：あなたはあなたのコントローラでは、ステータスの成功または失敗（または何も）

をお使いのコントローラでの製品から機能デタッチタグを作成して返す必要があります

function detachTag(){ 
    $input = Input::all(); 
    $product= Products::findOrFail($input['product_id']); 
    $product->tags()->detach($input['tag_id']); 
    $product= Products::where('customer_id', Auth::user()->customers_id)->get(); 

    return "Some state for checking it a success or not"; 
} 

セカンド：削除ボタンをクリックしたときにチェックするためのjavascript関数を作成します。最初の手順で作成した関数のパラメータでリクエストを送信し、HTMLページからタグを再レンダリングまたは削除します。 **パラメータは平均PRODUCT_IDであり、あなたが.deleteタグ-BTNをクリックすると、あなたの希望は、あなたのjsで

$(".delete-tag-btn").on('click', function(){ 
    var url = "localhost/deletetag?"; // Url to deleteTag function 
    url += "product_id=" + $(this).data('product_id'); 
    url += "&tag_id=" + $(this).data('tag_id'); 

    // Now url should look like this 'http://localhost/deletetag?product_id=2&tag_id=5 
    // Send get request with url to your server 
    $.get(url, function(response){ 
     // Do what you want 
    }); 
}); 

それをデタッチすることTAG_IDするので、それがデタッチ要求を送信しますそれ

Answer 2

、データを送信し、HTMLを返す簡単なAJAX呼び出し、右あなたがすることができますが、古いHTML

と交換し始めることができます:)

最初のステップは、この1はそれであなたのデータを記入し、サンプルAJAXで

アヤックス書き、フォーム送信であるか、いずれかのボタンがクリックされたときに（あなたのコードごとに）それを送信することです。

var BASEURL = window.location.origin + "/your_domain_name/"; 
    $.ajax({ 
        url: BASEURL + "your_route", 
        type: "POST/GET", //any_one 
        data: { 
         // Your data comes here (object) 
        }, 
        beforeSend: function() { 

        }, 
        success: function (response) { 
         console.log(response); // your html in return 
        }, 
        complete: function (response) { 

        } 
       }); 

ここで指定した経路に応じて、コントローラにデータが送信され、処理が正常に行われます。 これはhtmlだけを返します。あなたはこのhtmlで何でもできます。

これらの手順を検討した場合に直面する重要な問題の1つは、現在はページ全体が更新されている可能性が高いためです（新しいページが毎回更新されるためです）。しかし、新しいHTML 、あなたはページのその部分を返す必要があります単列またはそのようなものかもしれません。だから多くのサブビューであなたのビューを破る。 PHP @include(//path)（ブレード）が便利な場合があります。それは私が働くためにどのように使うのですか？ :)