jquery - Laravel 7 $.ajax 请求未执行
问题描述
我正在尝试使用 ajax 和 laravel7 向帖子添加评论在帖子显示刀片模板的底部,我包括此部分以显示现有评论和添加新评论的表单
<div class="container comments" #id="commentaires">
<h2 class="comments-title">Commentaires des adhérents</h2>
@foreach ($comments as $comment)
<div class="comment-header">
Posté par
{!! \App\User::find($comment->agent_id)->firstname; !!}
{!! \App\User::find($comment->agent_id)->familyname; !!}
le
<?php \Carbon\Carbon::setLocale('fr');?>
{{\Carbon\Carbon::parse($comment->created_at)->translatedFormat('l jS F Y')}}
</div>
<div class="comment-body">
{{$comment->content}}
</div>
@endforeach
@auth
<div class="comment-form">
<div class="comment-invite">
Laissez un commentaire
</div>
{!! Form::open(['action'=>"CommentController@store",'method'=>'POST']) !!}
<div class="row post-option-background">
<div class="col-md-12" >
{{ Form::hidden('post_id', $post->id) }}
{{ Form::hidden('agent_id', auth()->user()->id) }}
{{ Form::text('content','',['class'=>'form-control'])}}
</div>
</div>
{{Form::submit('Enregistrer',['class'=>'btn btn-primary btn-submit'])}}
{!! Form::close() !!}
</div>
@endauth
@guest
<div class="comment-invite">
Connectez-vous pour laisser un commentaire
</div>
@endguest
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
});
$(".btn-submit").click(function(e){
e.preventDefault();
var post_id = $("input[name=post_id]").val();
var agent_id = $("input[name=agent_id]").val();
var content = $("input[name=content]").val();
console.log('post_id is : '+post_id+', agent_id is : '+agent_id+' and content is : '+content);
var url='{{ url('comments') }}'
console.log(url);
$.ajax({
type:'POST',
url:url,
data:{post_id:post_id, agent_id:agent_id, content:content},
dataType: 'json',
success:function(data){
$("#commentaires").append("<div> success </div>");
console.log('success');}
});
console.log('reaching end of click function');
});
</script>
路线
我的路线是
Route::resource('posts','PostsController');
Route::post('/comments','CommentController@store')->name('storeAjax');
我在 CommentController 中的商店功能是
/**
* Store a newly created comment in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request){
if ($request->ajax()){
$this->validate($request, [
'content'=>'required',
'post_id'=>'required',
'agent_id'=>'required'
]);
return response()->json(['success'=>'Got Simple Ajax Request.']);
} else{
return 'request is not ajax';
}
}
我显示帖子,在评论表单中填写:“这是一个示例”,然后单击提交按钮。
点击函数执行完毕,可以在控制台看到各种消息
post_id 是:131,agent_id 是:1,内容是:这是一个示例 131:303:21 http://localhost:8000/comments 131:305:12 到达点击功能的末尾
然而,浏览器中什么也没有发生。似乎没有执行ajax请求。有人可以帮我解决这个问题吗?
解决方案
尝试
$(document).on('button.btn-submit','click',function(e) {
e.preventDefault();
//rest of your code
});
推荐阅读
- javascript - 如何使用烧瓶从 javascript 中获取变量
- javascript - 在 chrome 上用 Javascript 播放 MP3 序列
- c# - 在 ListView UWP 中使用 UserControl,数据绑定问题
- python - 来自具有自动日期解析的dicts的DataFrame
- elasticsearch - 弹性搜索性能
- ruby - 如何在 Windows 机器上使用 RSpec 和 Watir 运行并行测试?
- javascript - 使用Angular如何在表格行内停止复选框单击事件的传播()?
- java - 从两个自定义对象列表中删除公共元素
- python-3.x - 将 HTTP 头字典字符串加载到 JSON 中并解析它
- c# - 初始化列表属性