无法使用 jquery 和 ajax 获取 append 数据
[英]unable to append data using jquery and ajax
问题描述
我正在尝试在 Laravel 中使用 ajax ，这样我就可以在不重新加载页面的情况下创建帖子。 这是我到目前为止所做的。 我创建了一个 controller 并存储数据
public function store(Request $request)
{
//
$post=new Post();
$post->user_id=auth()->user()->id;
$post->content=$request->content;
if($request->hasfile('image'))
{
$file=$request->file('image');
$extension=$file->getClientOriginalExtension();
$filename=time() ."." . $extension;
$file->move('uploads/image',$filename);
$post->image=$filename;
}
$post->save();
return response()->json($post);
}
我还通过了一个 ajax 如
<script>
$('#CreatePost').submit(function(e){
e.preventDefault();
let content=$('#content').val();
let image=$('#image').val();
$.ajax({
url:"{{route('home.store')}}",
type:"POST",
data:{
content:content,
image:image,
_token:_token
},
sucess :function (response)
if(response)
{
$('#showid').prepend('<div class="col-sm-12" id="showid">
<div class="iq-card iq-card-block iq-card-stretch iq-card-height">
<div class="iq-card-body">
<div class="post-item">
<div class="d-flex flex-wrap">
<div class="media-support-user-img mr-3">
<img class="rounded-circle img-fluid" src="{{asset('assets/html/images/user/1.jpg')}}" alt="">
</div>
<div class="media-support-info mt-2">
<h5 class="mb-0 d-inline-block"><a href="#" class="">{{$posts->user->name}}</a></h5>
<p class="ml-1 mb-0 d-inline-block"></p>
<p class="mb-0">{{$posts->created_at}}</p>
</div>
<div class="iq-card-post-toolbar">
<div class="dropdown">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
<i class="ri-more-fill"></i>
</span>
<div class="dropdown-menu m-0 p-0">
<a class="dropdown-item p-3" href="#">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-save-line"></i></div>
<div class="data ml-2">
<h6>Save Post</h6>
<p class="mb-0">Add this to your saved items</p>
</div>
</div>
</a>
<a class="dropdown-item p-3" href="#">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-close-circle-line"></i></div>
<div class="data ml-2">
<h6>Hide Post</h6>
<p class="mb-0">See fewer posts like this.</p>
</div>
</div>
</a>
<a class="dropdown-item p-3" href="#">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-user-unfollow-line"></i></div>
<div class="data ml-2">
<h6>Unfollow User</h6>
<p class="mb-0">Stop seeing posts but stay friends.</p>
</div>
</div>
</a>
<a class="dropdown-item p-3" href="#">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-notification-line"></i></div>
<div class="data ml-2">
<h6>Notifications</h6>
<p class="mb-0">Turn on notifications for this post</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="user-post text-center">
<a href="javascript:void();"><img src="{{asset('uploads/image/'.$posts->image)}}" alt="post-image" class="img-fluid rounded w-100 mt-3"></a>
</div>
<div class="comment-area mt-3">
<div class="d-flex justify-content-between align-items-center">
<div class="like-block position-relative d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="like-data">
<div class="dropdown">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
<img src="{{asset('assets/html/images/icon/01.png')}}" class="img-fluid" alt="">
</span>
<div class="dropdown-menu">
<a class="ml-2 mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Like"><img src="{{asset('assets/html/images/icon/01.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Love"><img src="{{asset('assets/html/images/icon/02.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Happy"><img src="{{asset('assets/html/images/icon/03.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="HaHa"><img src="{{asset('assets/html/images/icon/04.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Think"><img src="{{asset('assets/html/images/icon/05.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Sade"><img src="{{asset('assets/html/images/icon/06.png')}}" class="img-fluid" alt=""></a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lovely"><img src="{{asset('assets/html/images/icon/07.png')}}" class="img-fluid" alt=""></a>
</div>
</div>
</div>
<div class="total-like-block ml-2 mr-3">
<div class="dropdown">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
140 Likes
</span>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Max Emum</a>
<a class="dropdown-item" href="#">Other</a>
</div>
</div>
</div>
</div>
<div class="total-comment-block">
<div class="dropdown">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
20 Comment
</span>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Max Emum</a>
</div>
</div>
</div>
</div>
<div class="share-block d-flex align-items-center feather-icon mr-3">
<a href="javascript:void();"><i class="ri-share-line"></i>
<span class="ml-1">99 Share</span></a>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>');
$('#CreatePost')[0].reset();
}
});
});
</script>
我想在不重新加载页面的情况下显示我的数据，但我无法这样做。 我得到的只是我在 json 中的回应
{
"user_id": 1,
"content": "ya allah habibi",
"updated_at": "2021-05-25T09:07:58.000000Z",
"created_at": "2021-05-25T09:07:58.000000Z",
"id": 18
}
1 个解决方案
解决方案1
0 2021-05-25 09:33:26
使用FormData （自动设置Content-Type “ multipart/form-data ”）
$('#CreatePost').submit(function(e){
e.preventDefault();
let content=$('#content').val();
let image=$('#image').val();
let file = $('#image').get(0).files[0];
let fd = new FormData();
fd.append('content', content);
fd.append('image', file, file.name);
fd.append('_token', _token);
$.ajax({
url:"{{route('home.store')}}",
type:"POST",
data:fd,
dataType: 'json',
sucess :function (response)
if(response)
{
$('#showid').prepend(/* your template */);
jQuery / Ajax 在警报中正确发送“data-”值，但无法将 append 放入 ZE1BCFD7623EAC1E49B 中的特定 div 中
[英]jQuery / Ajax properly sending “data-” value in an alert, but unable to append it into a specific div inside a php for
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery Ajax数据显示使用附加的两倍
无法使用 jquery ajax 发布数据
jQuery / Ajax 在警报中正确发送“data-”值，但无法将 append 放入 ZE1BCFD7623EAC1E49B 中的特定 div 中
将Ajax-jquery数据附加到cakephp中的dropdownlist中
append() 不是 ajax 数据 srting 中的函数 jQuery
AJAX URL追加与存储的jQuery .data（）冲突
Ajax / Json数据的众多Jquery的替代方法
jQuery-Ajax：在 URL 中附加数据
无法在 Jquery ajax 上发布数据
无法使用jQuery数据表，AJAX和JSON显示数据
相关标签