[英]How to use AJAX to get value form controller into a popup
I want to get data from a controller and display it in a html pop-up when a button is clicked.我想从 controller 获取数据,并在单击按钮时将其显示在 html 弹出窗口中。
At this point the POPUP is showing when the button is clicked but the data isn't loaded此时,当单击按钮但未加载数据时会显示 POPUP
At this point I need that onclick the values get loaded and show them in the popup.此时我需要 onclick 值被加载并在弹出窗口中显示。
index.blade.php index.blade.php
<button data-toggle="modal" data-target="#edit" id ="uid" name="uid" value="<?php echo $user->id ?>">
</button>
<div class="modal fade" id="edit" tabindex="-1" role="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Editar</h4>
</div>
</div>
<div class="modal-body">
<form class="form" method="POST" action = "{{ route('/alteruser') }}" name = 'user'>
@csrf
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons"></i>
</div>
</div>
<input name = 'name' type="text" class="form-control" placeholder="<?php echo $seluser->id ?? ''?>" id='id' disabled>
<input name = 'name' type="text" class="form-control" "<?php echo $seluser->name ?? ''?>" id='name'>
<input type="text" class="form-control" placeholder="<?php echo $seluser->email ?? ''?>" id = 'email'>
<input type="password" placeholder="<?php echo $seluser->password ?? ''?>" class="form-control" id = 'password'>
<input type="text" placeholder="<?php echo $seluser->nif ?? ''?>" class="form-control" id = 'nif'>
<input type="text" placeholder="<?php echo $seluser->contacto ?? ''?>" class="form-control" id = 'contact'>
<input type="text" placeholder="Grupo" class="form-control" id = 'grupo'>
</div>
</div>
<button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" name = 'uid'>Confirmar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
UserController@GetUser:用户控制器@GetUser:
public function getUser() {
$id = $_POST['uid'];
$seluser = DB::table('users') -> where('id', $id) -> first();
$view = view('/users/index',compact('seluser'))->render();
return response(['status'=> 1, 'data' => $view]);
}
Ajax code in index.blade.php: index.blade.php 中的 Ajax 代码:
$(document).ready(function(){
$("#uid").click(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url: baseUrl+"/getUser",
data:{uid: $("#uid").val()},
dataType: 'json',
success: function(data) {
$('#edit').html(data.html);
}
});
});
});
I'm new at AJAX so i assume the error is in it我是 AJAX 的新手,所以我认为错误就在其中
Here is an example for what you're trying to do: Controller for GET request:这是您尝试执行的操作的示例:Controller 用于 GET 请求:
$users = \App\User::all();
return view('users', ['users' => $users]);
View users:查看用户:
<div class="container">
@foreach ($users as $user)
<button class="btn btn-primary" data-toggle="modal" data-target="#edit" id ="uid" data-id="{{$user->id}}">
click here
</button>
@endforeach
@csrf
<div class="modal fade" id="edit" tabindex="-1" role="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Editar</h4>
</div>
</div>
<div class="modal-body">
<div id="user">
<h1 id="name"></h1>
<p id="email"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS code: JS代码:
<script>
/* eslint disabled */
$(
() => {
$('#uid').click(
(e) => {
var uid = $(event.target).data('id');
$.ajax({
type: 'POST',
url: 'users/' + uid,
data: {'_token': $("input[name='_token']").val()},
success: function(data){
// or use : $('#user').html(data);
$('#user #name').text(data.name);
$('#user #email').text(data.email);
}
});
}
);
}
);
</script>
Controller (Route) POST request: Controller(路由)POST请求:
Route::post('users/{id}', function ($id) {
$data = \DB::table('users')->where('id', $id)->first();
return response()->json($data, 200);
});
This code allow to the client, for each user in db there're modal button to open popup, and after clicking on user's button i get a pop up with mail and name for this user此代码允许客户端,对于 db 中的每个用户,都有模式按钮来打开弹出窗口,并且在单击用户按钮后,我会弹出一个包含该用户的邮件和名称的弹出窗口
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.