Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Pour un système de commentaire d'article, j'essaye d'effectuer une requete Ajax avec la method POST.
Voici mon Code :

<?php 

// *** routes.php ***

// Ajouter un commentaire à l'article avec Ajax
Route::post('add_comment_article_with_ajax', 'ArticleController@addCommentWithAjax');

// Afficher l'article WHERE slug
Route::get('{slug}', [
    'as' => 'article_show',
    'uses' => 'ArticleController@show'
])->where('slug', '[0-9a-z\-]+');
<?php
// *** ArticleController.php ***

/**
 * Traitement de l'ajout d'un commentaire d'article
 *
 * @param Request $request
 * @return mixed
 */
public function addCommentWithAjax(Request $request)
{
    if ($request->ajax()) {
        $idArticle = (int) $request->get('id');

        $article = Article::findOrFail($idArticle);

        if ($article->commentsAreAuthorised()) {
            $this->validate($request, [
                'username' => 'required|max:250',
                'email' => 'required|email|max:250',
                'comment' => 'required|max:10000',
                'alloemail' => 'empty',
            ]);

            $Commentarticle = new Commentarticle();
            $Commentarticle->username = $request->get('username');
            $Commentarticle->email = $request->get('email');
            $Commentarticle->comment = nl2br($request->get('comment'));
            $Commentarticle->ip = $request->ip();
            $Commentarticle->article_id = $idArticle;
            $Commentarticle->updated_at = Carbon::now();
            $Commentarticle->updated_at = Carbon::now();
            $Commentarticle->save();

            return response()->json(['success' => 'Votre commentaire a bien été ajouté.']);
        }
    }
}

Ma vue

<form method="get" action="#">
    <input type="hidden" name="id" value="{{ $article->id }}">
    <input type="hidden" name="datetime" value="{!! purify($currentDatetime) !!}">
    <input type="text" name="alloemail" value="">
    {!! Form::Label('username', 'Votre Pseudo *') !!}
    {!! Form::text('username', '') !!}
    {!! Form::Label('email', 'Votre Email *') !!}
    {!! Form::email('email', '') !!}
    {!! Form::Label('comment', 'Votre commentaire *') !!}
    {!! Form::textarea('comment', '') !!}
    <div class="result-ajax"></div>
    <div class="out-submit-and-out-load">
        <div class="div-loader-bars div-loader-bars-show-article">
            <span class="loader-bars">
                <span></span>
            </span>
        </div>
        <input type="submit" name="submit" value="Commentez">
    </div>
    <i>* Champs obligatoires. Votre Email ne sera pas rendu publique</i>
    <div class="clear-both"></div>
</form>

Mon JS :

// Si champ(s) laissé(s) vide(s) -> empécher de suite soumission du form
if (error == 0) {
    // Traitement du formulaire de contact avec Ajax
    $(".div-loader-bars").show();

    var id = $(".comments-article form input[name=id]").val();
    var alloemail = $(".comments-article form input[name=alloemail]").val();
    var username = $(".comments-article form input[name=username]").val();
    var email = $(".comments-article form input[name=email]").val();
    var comment = $(".comments-article form textarea[name=comment]").val();

    var dataAddCommentArticle = 'id='+id+'&alloemail='+alloemail+'&username='+username+"&email="+email+"&comment="+comment;

    $.ajax({
        type: 'post',
        url: 'add_comment_article_with_ajax',   // dans routes.php
        data: dataAddCommentArticle,
        dataType: 'json',
        success: function(result){
            $(".div-loader-bars").fadeOut(1500);
            $('.result-ajax').empty();

            if (result.success != undefined) {
                $('.comments-article form input[name=username], .comments-article form input[name=email], .comments-article form input[name=website], .comments-article form input[name=github], .comments-article form input[name=twitter], .comments-article form textarea[name=comment]').val('');  // pour vider input apres success
                $(".result-ajax").append('<span class="result-ajax-success">'+result.success+'</span>');

                var datetime = $(".comments-article form input[name=datetime]").val();

                $('.list-comments')
                    .prepend('<div class="one-comment">'+
                                '<div class="username">Commentaire de <strong>'+username+'</strong>, <span class="date">'+datetime+'</span></div>'+
                                '<div class="comment">'+comment+'</div>'+
                            '</div>');
            }
        },
        error: function(jqXhr, json, errorThrown){
            $(".div-loader-bars").fadeOut(1500);
            $('.result-ajax').empty();

            var errors = $.parseJSON(jqXhr.responseText);

            var html = '';

            $.each(errors, function (key, value) {
                html += value;
            });

            $(".result-ajax").append('<span class="result-ajax-error">'+html+'</span>');
        }
    });

    return false;
}

Ce que je veux

Je veux que ça fonctionne avec POST. Si je remplace post par get dans mes routes et dans mon ajax, ça fonctionne. Mais avec POST, ça ne marche pas.

Ce que j'obtiens

Lorsque j'essaye d'ajouter un commentaire, j'obtiens cette erreur :
"NetworkError: 500 Internal Server Error - http://localhost/___Laravel-test/www/articles/add_comment_article_with_ajax"aroundSyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON dataaround return window.JSON.parse( data + "" );

Je pense que c'est peut être une histoire de token, mais j'en suis pas sur. Et je ne suis pas arrivé à faire fonctionner le tokken avec Ajax malgrès avoir fouiner dans Google.

Comment puis-je résoudre ce problème SVP ?
Merci beaucoup.

2 réponses


Alexandre #lbac
Réponse acceptée

Comme ceci :

Pas en get mais en post :

var formData = new FormData($('#form')[0]);

et

$request->input('field');

dans ton controller

stephweb
Auteur

Du coup résolu.
au lieu de faire ceci :

input[name=token]"

Faut faire ceci :

input[name=_token]"

Ce qui donne :

var id = $(".comments-article form input[name=id]").val();
var alloemail = $(".comments-article form input[name=alloemail]").val();
var username = $(".comments-article form input[name=username]").val();
var email = $(".comments-article form input[name=email]").val();
var comment = $(".comments-article form textarea[name=comment]").val();
var token = $(".comments-article form input[name=_token]").val();

var dataAddCommentArticle = 'id='+id+'&alloemail='+alloemail+'&username='+username+'&email='+email+'&comment='+comment+'&_token='+token;

Et voilà ça marche.

Par contre j'ai une petite question SVP,
Les data à envoyer en Ajax,
c'est mieux d'y envoyer en string (comme ci-dessus), ou en objet comme ceci ? :

var dataAddCommentArticle = {
  id: id,
  alloemail: alloemail,
  username: username,
  email: email,
  comment: comment,
  _token: token,
}

Dans les 2 cas ça marche.
Merci