在Laravel中使用AJAX提交数据时传递URL中的变量

时间:2017-02-02 19:57:04

标签: jquery ajax laravel-5.2 laravel-5.3

我试图在Laravel中使用AJAX提交数据,但我一直收到以下错误 http://localhost:8000/comments/19无法加载资源:服务器响应状态为500(内部服务器错误)

post_id是在路线中声明的变量: - enter image description here

以下是页面中的代码: -

@extends('main')

@section('title', "| $post->title")

@section('content')

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <img src=" {{ asset('images/' . $post->image) }} " height="400" width="600" />
            <h1> {{ $post->title }}</h1>
            <p>{!! $post->body !!}</p>
            <hr>
            <p>Posted In: {{ $post->category->name }}</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3 class="comments-title"><span class="glyphicon glyphicon-comment"></span>  {{ $post->comments()->count() }} Comments</h3>
            @foreach($post->comments as $comment)
                <div class="comment">
                    <div class="author-info">

                        <img src="{{ "https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=monsterid" }}" class="author-image">
                        <div class="author-name">
                            <h4>{{ $comment->name }}</h4>
                            <p class="author-time">{{ date('F nS, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
                        </div>

                    </div>

                    <div class="comment-content" id="comment">
                        {{ $comment->comment }}
                    </div>

                </div>
            @endforeach
        </div>
    </div>

    <div class="row">
        <div id="comment-form" class="col-md-8 col-md-offset-2" style="margin-top: 50px;">
            {{ Form::open() }}

                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label('name', "Name:") }}
                        {{ Form::text('name', null, ['class' => 'form-control']) }}
                    </div>

                    <div class="col-md-6">
                        {{ Form::label('email', 'Email:') }}
                        {{ Form::text('email', null, ['class' => 'form-control']) }}
                    </div>

                    <div class="col-md-12">
                        {{ Form::label('comment', "Comment:") }}
                        {{ Form::textarea('comment', null, ['class' => 'form-control', 'rows' => '5']) }}

                        {{ Form::submit('Add Comment', ['class' => 'btn btn-success btn-block', 'style' => 'margin-top:15px;', 'id'=>'load']) }}
                    </div>
                </div>

            {{ Form::close() }}
        </div>
    </div>

@endsection

@section('scripts')

    {!! Html::script('js/jquery-3.1.1.min.js') !!}


<script type="text/javascript">

    $(document).ready(function(){
        $('#load').click(function(event){
          event.preventDefault();

            $.ajax({
                type:"POST",
                url: '{{route('comments.store', ['id' => 19])}} ',
                dataType: "html",
                success:function(data){
                    $("#comment").html(data);
                }
          })
      })
    })
    </script>
@endsection

2 个答案:

答案 0 :(得分:2)

我在推特上看到了您的请求,所以我想我会尽力帮忙。

在使用AJAX时,我在Laravel中看到这种类型的错误的最常见原因是CSRF令牌不会随AJAX请求一起发送。仅出于测试目的,我建议从CSRF中间件中删除comments.store路由。对于生产而言,这显然不安全。但是如果你删除了CSRF验证并且它有效,那么我们就可以很容易地知道这就是问题所在。

如果CSRF是问题,那么我们就知道令牌没有随Ajax请求一起发送。在Laravels文档中,它确实解释了如何实现这一目标。我们需要将CSRF令牌添加到每个Ajax请求的标头中。有关如何执行此操作的信息,请访问:https://laravel.com/docs/5.3/csrf#csrf-x-csrf-token

上面讨论了您应该使用的HTTP方法。 POST是根据问题中显示的路由列表使用的正确HTTP方法。所以请保持POST状态。

同时仔细检查您正在使用的Laravel版本。在Laravel 5.3及更高版本中,如果您使用内置资产管道,则通常不需要手动加载jQuery,因为默认情况下它是作为app.js文件的一部分加载的。

最后,如果您仍然遇到问题,请使用浏览器中的“检查元素”对其进行诊断。您应该能够在控制台中读取任何JS错误,并能够深入了解实际的HTTP请求尝试以进一步诊断它。如果您在该控制台中看到任何错误,请告诉我们。

如果这没有用,请告诉我,我可以编辑我的答案来帮助你。在相关的说明中,我将在接下来的一个月内重新构建更新到Laravel 5.4的教程系列。该教程系列是在5.2的早期版本上完成的,现在已经发生了很多变化,因为5.3已经过去了,现在已经有5.4了。

答案 1 :(得分:1)

这就是我解决它的方法,但是我无法在不刷新的情况下显示它,也不能将它设置为相同的样式: -

<script type="text/javascript">

    // post_id = $("h1:first").text();
    // console.log(post_id);
   // var myid = parseInt($('h1:last').text());


    $(document).ready(function(){
        $('#load').click(function(event){
          event.preventDefault();



          var token = $('input[name=_token]').val();
          var name = $('input[name=name]').val();
          var email = $('#email').val();

          var comment = $('#bant').val();

            $.ajax({
                type:"POST",
                dataType: "html",
                url: '{{route('comments.store', ['id' =>  $post->id ])}} ',
                data: {_token: token, name: name, email: email, comment:comment} 

                    });
                }
          )
      })

    </script>