我试图在Laravel中使用AJAX提交数据,但我一直收到以下错误 http://localhost:8000/comments/19无法加载资源:服务器响应状态为500(内部服务器错误)
以下是页面中的代码: -
@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
答案 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>