jquery - JQuery 提交按钮不起作用 Laravel
问题描述
我正在尽一切努力使我的网页更流畅。问题是,我试图提交一个 JQuery,现在,按下该按钮时不会做任何事情。
这是我的代码:
The form:
<form id="myForm">
<div class="author-thumb">
<img src="{{ Auth::user()->getFirstMediaUrl('pps') ? Auth::user()->getFirstMediaUrl('pps') : '/img/ava_10.jpg' }}" width="36" height="36" alt="author">
</div>
<div class="form-group with-icon label-floating is-empty">
<label class="control-label">Share what you are thinking here...</label>
<textarea class="form-control" name="content" id="content" required></textarea>
</div>
<div class="add-options-message">
<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" data-original-title="ADD PHOTOS">
<svg class="olymp-camera-icon" data-toggle="modal" data-target="#update-header-photo"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
</a>
<button class="btn btn-primary btn-md-2" id="ajaxSubmit">Post</button>
</div>
</form>
The controller:
public function store(Request $request)
{
$post = new Post();
$post->user_id = Auth::user()->id;
$post->username = Auth::user()->username;
$post->author = Auth::user()->name;
$post->content = $request->content;
$post->save();
return response()->json(['success'=>'Data is successfully added']);
}
The route:
Route::post('/post', [
'uses' => 'PostController@store',
]);
The JQuery:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#ajaxSubmit').click(function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/post') }}",
method: 'post',
data: {
content: jQuery('#content').val()
},
success: function(result){
console.log(result);
}});
});
});
</script>
有人可以帮我吗?请向我解释代码的哪一部分是错误的,以及我可以做些什么来避免再次犯同样的错误。在此先感谢您的时间。
解决方案
解决方案如下:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#ajaxSubmit').click(function(e){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/post') }}",
method: 'post',
data: {
_token: '{{csrf_token()}}', <-- ADD THIS LINE!
content: jQuery('#content').val()
},
success: function(result){
console.log(result);
}});
});
});
</script>
推荐阅读
- r - 如何查看 R 函数体内部
- javascript - React - 浏览器缩小时禁用功能
- c# - /usr/share/dotnet/sdk/2.2.402/NuGet.targets(123,5):错误:缺少根元素。[~/projects/test-proj/test-proj.csproj]
- python - 使用 matplotlib.pyplot 在直线和 x 轴之间添加垂直虚线
- google-apps-script - 将一串数据提取到单独的单元格中
- opengl - 是否可以编写在 OpenGL 2.x 和 3.x 之间可移植的顶点数组代码?
- powershell - 如何从 Powershell 中的十进制值获取分钟和秒 (mm:ss)
- reactjs - React Hooks 与 Redux 和 MVVM 架构
- azure - Azure AD B2C - 如何以编程方式创建消费者用户?
- python - 如何将 .txt 格式的文件导入 Python,具有规则的列结构(但不可靠的分隔符,如制表符、逗号等)