Laravel＆Ajax - 爽やかにテーブルにデータを挿入する

Question

まず、私はAjaxを使って初心者だと言わなければならない。 ページを更新せずにデータをdbに挿入したいとします。これまでのところ、私はブレードでは、コード... を以下している私は、IDとフォームを持っている：

{!! Form::open(['url' => 'addFavorites', 'id' => 'ajax']) !!} 

    <a href="#" id="favorite" class="bookmark"><img align="right" src="{{ asset('/img/icon_add_fav.png')}}"></a> 
    <input type="hidden" name = "idUser" id="idUser" value="{{Auth::user()->id}}"> 
    <input type="hidden" name = "idArticle" id="idArticle" value="{{$docinfo['attrs']['sid']}}"> 
    <input type="submit" id="test" value="Ok"> 

{!! Form::close() !!} 

そして、私が持っているコントローラで：

public function addFavorites() 
{ 
    $idUser    = Input::get('idUser'); 
    $idArticle   = Input::get('idArticle'); 
    $favorite    = new Favorite; 
    $favorite->idUser  = $idUser; 
    $favorite->idArticle = $idArticle; 
    $favorite->save(); 

    if ($favorite) { 
     return response()->json([ 
      'status'  => 'success', 
      'idUser'  => $idUser, 
      'idArticle' => $idArticle]); 
    } else { 
     return response()->json([ 
      'status' => 'error']); 
    } 
} 

私は挿入するAJAXをしようとしていますデータベース：

$('#ajax').submit(function(event){ 
     event.preventDefault(); 

    $.ajax({ 
     type:"post", 
     url:"{{ url('addFavorites') }}", 
     dataType="json", 
     data:$('#ajax').serialize(), 
     success: function(data){ 
     alert("Data Save: " + data); 
     } 
     error: function(data){ 
     alert("Error") 
     } 
    }); 
    }); 

また、私のweb.phpには、お気に入りを追加するルートがあります。しかし、フォームを提出すると、私はこのようなJSONレスポンスを返します：{"status":"success","idUser":"15","idArticle":"343970"} ...実際にはdbに挿入されますが、ページをリロードしないようにします。アラートボックスを表示するだけです。

Answer 1

@sujivasagamは通常のポストアクションを実行していると言います。あなたのjavascriptをこれに置き換えてみてください。私もいくつかの構文エラーを認識しましたが、ここで修正されています。

$("#ajax").click(function(event) { 
    event.preventDefault(); 

    $.ajax({ 
     type: "post", 
     url: "{{ url('addFavorites') }}", 
     dataType: "json", 
     data: $('#ajax').serialize(), 
     success: function(data){ 
       alert("Data Save: " + data); 
     }, 
     error: function(data){ 
      alert("Error") 
     } 
    }); 
}); 

あなただけの代わりに<button>で<input type="submit">を置き換えることができ、あなたはおそらく、投稿からフォームを防ぎevent.preventDefault()を必要とされることはありませんよ。

EDIT

は、ここでコメントでを求めたとしてだけではJavaScriptを取得し、掲示の例です。

(function() { 

    // Loads items into html 
    var pushItemsToList = function(items) { 
     var items = []; 

     $.each(items.data, function(i, item) { 
      items.push('<li>'+item.title+'</li>'); 
     }); 

     $('#the-ul-id').append(items.join('')); 
    } 

    // Fetching items 
    var fetchItems = function() { 
     $.ajax({ 
      type: "GET", 
      url: "/items", 
      success: function(items) { 
       pushItemsToList(items); 
      }, 
      error: function(error) { 
       alert("Error fetching items: " + error); 
      } 
     }); 
    } 

    // Click event, adding item to favorites 
    $("#ajax").click(function(event) { 
     event.preventDefault(); 

     $.ajax({ 
      type: "post", 
      url: "{{ url('addFavorites') }}", 
      dataType: "json", 
      data: $('#ajax').serialize(), 
      success: function(data){ 
        alert("Data Save: " + data); 
      }, 
      error: function(data){ 
       alert("Error") 
      } 
     }); 
    }); 

    // Load items (or whatever) when DOM's loaded 
    $(document).ready(function() { 
     fetchItems(); 
    }); 
})(); 

Answer 2

通常、フォームを送信するボタンタイプの「送信」を使用しています。だからボタンとして、そのコールのクリックでajax関数

Answer 3

は type="button"に、ボタンの種類を変更し、onclickの= "yourfunction（）" onclickのアクションを追加

。あなたのファンクションの中にajaxを入れてください。

Answer 4

入力タイプをボタンに置​​き換え、onClickリスナーを作成します。あなたはonclickのリスナーに、この入力されたIDを使用していることを確認してください：だから

：

$('#test').on('click', function(event){ 
    event.preventDefault() 
    ... further code 

私も明確な何かにIDを変更します。