2016-07-24 16 views
2

Ich versuche, Ajax-Funktionalität zu einem Like-Button hinzufügen.Formular Umleitung zu Route auf AJAX-Anfrage in Laravel 5

Alles funktioniert, außer dass ich auf eine Seite mit JSON-Daten weitergeleitet werde, nachdem ich auf die Schaltfläche "Gefällt mir" geklickt habe.

Ich benutze e.preventDefault() und es leitet mich immer noch um.

Wenn ich on('click') verwende, bekomme ich einen TokenMismatch Fehler im Konsolenprotokoll, obwohl ich eine versteckte Eingabe mit einem Token enthalten habe.

jquery.min.js: 4 POST http://localhost/socialnet/public/likeStatus 500 (Internal Server Error)

Wenn ich on('submit') die Daten verwenden, durchläuft aber ich habe auf die Seite mit der JSON-Antwort umgeleitet.

Dies ist in meinen Controller [email protected]()

public function likeStatus() { 

    if (Input::has('like_status')) { 
     $status = Input::get('like_status'); 
     $selectedStatus = Status::find($status); 

     $selectedStatus->likes()->create([ 
      'user_id' => Auth::user()->id, 
      'status_id' => $status 
     ]); 

     $response = array(
      'status' => 'success', 
      'msg' => 'You have liked this status', 
     ); 

     return Response::json($response); 
    } 
} 

Der Blick

{!! Form::open(['action' => '[email protected]', 'id' => 'like_form']) !!} 
    {!! Form::hidden('like_status', $status->id) !!} 
    {!! Form::hidden('user_id', Auth::user()->id) !!} 
    <button type="submit" name="likeStatus" class="btn btn-info btn-xs" id="like-status"> 
      <i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }}) 
    </button> 
{!! Form::close() !!} 

Die Javascript

$('#like-status').on('click', function(e){ 
    e.preventDefault(); 

    var status_id = $('input[name=like_status]').val(); 
    var user_id = $('input[name=user_id]').val(); 

    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').val() 
     } 
    }); 

    $.ajax({ 
     url: 'http://localhost/socialnet/public/likeStatus', 
     method: 'post', 
     data: {status_id: status_id, user_id: user_id}, 
     success: function(data) { 
      console.log(data.msg); 
     } 
    }); 
}); 

EDIT: Habe ich nur noch die CSRF-Token in eine Variable und hinzugefügt es zum data

var status_id = $('input[name=like_status]').val(); 
    var user_id = $('input[name=user_id]').val(); 
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 

    $.ajax({ 
     url: 'http://localhost/socialnet/public/likeStatus', 
     method: 'post', 
     data: {status_id: status_id, user_id: user_id, _token: CSRF_TOKEN}, 
     success: function(data) { 
      console.log(data.msg); 
     } 
    }); 

Dies gibt Status Code: 200 in der Registerkarte Netzwerk, sondern gibt undefined in der Konsole und keine Daten durchmacht.

EDIT 2: Etwas sehr komisches geschieht. Ich bekomme undefined in der Konsole, wenn ich versuche, den neuesten Status zu mögen, und nichts passiert. Aber es funktioniert, wenn ich den vorherigen (alten) Status mag, aber wenn ich auf den "Gefällt mir" -Button klicke, werde ich auf die JSON-Datenseite weitergeleitet und die Daten gehen durch.

Was mache ich falsch?

+0

Haben Sie var_dump in PHP ausprobiert? Hast du etwas bekommen? – Yanaro

Antwort

0

genannt wird Es scheint, dass das Problem liegt in Ihrer PHP-Code, es sucht nach like_status mit

if (Input::has('like_status')) 

aber Sie senden

{ 
status_id: status_id, 
user_id: user_id 
} 

Es gibt keine like_status gefunden werden. Eingabe :: hat ... wird false zurückgeben. Ihr Code wird im Wesentlichen in

public function likeStatus() { 

    if (Input::has('like_status')) { //It's always false 
    // 
    } 
    return undefined; 
} 
+0

'like_status' ist' status_id', weil ich mit 'var status_id = $ ('input [name = like_status]') val() 'und ohne die Ajax, die Anfrage geht durch die Datenbank fein, der Controller funktioniert. – Halnex

+1

Es funktioniert nicht so, Sie haben Eingabe-Name Like_status, warum es ohne Ajax funktioniert. Aber mit Ajax, wenn Sie status_id = like_status senden, wird PHP status_id, nicht like_status, wenn Sie eine var_dump (Input :: all()) Ich bin sicher, dass Sie das Feld nicht sehen werden like_status – Yanaro

+0

Sie sind absolut Richtig, ich kann nicht glauben, dass ich das verpasst habe. Ich habe gerade die ganze Sache funktioniert, danke Kumpel. – Halnex

0

Sie sollten .on('submit') verwenden, damit Sie die Umleitungsaktion des Formulars ordnungsgemäß verhindern können.

Wie es aussieht, versuchen Sie ein Klickereignis auf #like-status abzubrechen.

Stellen Sie sicher, dass der Beginn Ihrer jQuery-Funktion ist:

$('#like_form').on('submit', ... 

nur besonders sicher zu sein, um sicherzustellen, dass die Event-Handler korrekt gebunden bekommen binden Sie sollten auch innerhalb $(document).ready wie folgt:

$(document).ready(function() { 

    $('#like_form').on('submit', ... 

} 
+0

Ich mache das, ich habe 'click' in' submit' geändert und bekomme immer noch den gleichen Fehler. Wenn ich das Token mit diesem '$ ('meta [name =" csrf-token "]) ergreife. Attr (' content ')' Ich bekomme 'undefined' in der Konsole, aber mit' val() 'bekomme ich' 500 Interner Fehler – Halnex

+0

Worauf wird der 500 Internal Service geworfen? Sie können die Antwort von der AJAX-Anfrage sehen, indem Sie mit der rechten Maustaste in die Chrome-Konsole klicken und Log XmlHttpRequests ankreuzen und dann auf die Antwort in der Konsole klicken. Alternativ können Sie 'laravel.log' überprüfen, das den Stack-Trace auflistet. Es könnte für ein CSRF-Mismatch sein, oder CSRF funktioniert und es ist ein Fehler in Ihrer Controller-Funktion. –

+0

Ja, das gibt 'Status: 500' und laravel.log gibt' TokenMismatchException' Fehler, aber ich bekomme es nicht, ich habe das Token in der Ajax-Anfrage enthalten. – Halnex

0

Sie benötigen diese Linie in Erfolg AJAX Funktion hinzuzufügen

var new_data = JSON.parse(data); 

Ihre Daten zu dekodieren kommt von Anfrage

+0

Das hat nichts geändert. Immer noch die gleichen 'Status 500' Fehler – Halnex

+0

Hm, ich denke, der Fehler mit' return Antwort :: json ($ Antwort); ', So ändern Sie es in' Return json_encode ($ Antwort); ' –

+0

Ich bekomme die gleicher Fehler – Halnex

1

Das bedeutet, dass Ihr Ajax-Aufruf überhaupt nicht funktioniert, stellen Sie sicher, dass Sie Javascript in Ihrem Browser aktiviert haben und jquery ist enthalten, wenn es, dann versuchen, Schaltfläche Typ Schaltfläche senden zu ändern wenn die Taste die dynamisch erzeugt wird, können Sie die Live-Funktion versuchen, zu

$('#like-button').live("click",function(){ }) 

Versuch mit Alarm zu debuggen mit jquery Anruf unterbreiten die Funktion

stellen Sie sicher,
Verwandte Themen