使用jQuery post用Laravel将动态数据传递到引导模态 [英] Passing dynamic data to bootstrap modal with Laravel using jQuery post
问题描述
我正在尝试将动态数据传递给引导程序模式.我想做的是通过使用jQuery post request传递数据ID.我的视图users包含用户列表.当我单击details按钮时，我想使用jquery post传递ID，然后雄辩地使用ID，以检索有关每个用户的所有信息.
I am trying to pass dynamic data to a bootstrap modal. What i want to do is pass the data-id by using jQuery post request. I have my view users containing a list with the users. when i click on details button i want to pass the id using jquery post and then using eloquent, retrieve everything about each user.
我的观点
<table class="table">
<thead class="thead-default">
<tr>
<th>No.</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php use App\User;
$users = \App\User::where('admin',0)->get();
$i = 1;?>
@foreach($users as $user)
<tr id="{{$user->id}}">
<th scope="row">{{$i}}</th>
<td width="65%">{{ucfirst($user->name)." ".ucfirst($user->surname)}}</td>
<td>
<button class="btn btn-info infoU"
data-toggle="modal"
data-target="#viewUser"
data-id="{{$user->id}}">
<span class="glyphicon glyphicon-file"></span>
Details</button>
</td>
</tr>
<?php $i++ ?>
@endforeach
</tbody>
</table>
我的脚本
$(document).ready(function () {
$(".infoU").click(function (e) {
$('#pic').attr('src',$(this).attr("data-pic"));
$currID = $(this).attr("data-id");
$.post("detail.blade.php", {id: $currID}, function (data) {
$('#user-data').html(data);
}
);
});
});
我的模态
<div class="modal fade" id="viewUser" role="dialog">
<div class="modal-dialog" style="min-height: 800px">
<div class="modal-content">
<form method="get" action="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title" style="color: #BC0E91">User Details</h2>
</div>
<div class="modal-body">
<div id="user-data">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
detail.blade.php
detail.blade.php
<?php
if ($_REQUEST['id']){
$id = $_REQUEST['id'];
echo $id;
}
$usr = \App\User::where('id', $id)->first();
?>
我不知道为什么这不起作用，并且我不确定是否可以通过脚本而不是detail.blade.php传递路由.任何帮助深表感谢.谢谢
I don't know why this is not working and i am not sure if i can pass a route instead of detail.blade.php in the script. Any help is much appreciated. Thank you
推荐答案
刀片和口才
首先，不建议在刀片视图中进行雄辩的查询，因为这违背了其最初的目的.
正确的做法是，说您拥有此控制器:
Blade and Eloquent
First it's not recommended to have eloquent queries within your blade views, as it comes against it's initial purpose.
The proper to do it, is for say you have this controller :
MyController.php
...
use App\User;
class MyController extends Controller{
public function MyMethod(){
$users = User::where('admin',0)->get();
return view('myview',['users'=>$users]);
}
}
，然后在您看来
myview.blade.php
and then in your view
myview.blade.php
<table class="table">
<thead class="thead-default">
<tr>
<th>No.</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr id="{{$user->id}}">
<th scope="row">{{$loop->iteration}}</th> {-- Learn more about it at https://laravel.com/docs/5.4/blade#the-loop-variable --}
<td width="65%">{{ucfirst($user->name)." ".ucfirst($user->surname)}}</td>
<td>
<button class="btn btn-info infoU"
data-toggle="modal"
data-target="#viewUser"
data-id="{{$user->id}}">
<span class="glyphicon glyphicon-file"></span>
Details</button>
</td>
</tr>
@endforeach
</tbody>
</table>
Api请求
要获取用户详细信息，最好的方法是通过使用控制器的api路由进行操作.
To get the user details, the best way is to do it via an api route that uses a controller.
因此，请创建一个控制器(或使用现有的控制器)并尝试使用该控制器(此处将控制器命名为 UserController 出于演示目的:
So create a controller (or use an existent one) and try this (Named the controller here as UserController for demo purposes:
public function showUser($id){
return User::findOrFail($id);
}
和您的routes/api.php
Route::get('user/{id}', ['uses' => 'UserController@showUser']);
现在，如果您通过curl或Postman尝试使用api路由，则应该获取数据.
Now if you try your api route via curl or Postman you should get your data.
JavaScript
然后在您的javascript文件中，将其更改为此
And then in your javascript file, you should change it to this
$.get("user/"+$currID, function (data) {
$('#user-data').html(data);
// For debugging purposes you can add : console.log(data); to see the output of your request
});
注释
您发出了一个请求detail.blade.php，该请求无法执行，因为该文件不可访问.您应该使用控制器并将其指向它们的路由.
为了进一步阅读，我建议:
Laravel Ajax发布/在Laracasts获得示例
Kode博客上的Laravel 5 Ajax教程
You made a request detail.blade.php that cannot be done since the file is not accessible. You should use controllers and point your routes to them.
For further reading, I recommend :
Laravel Ajax post/get examples at Laracasts
Laravel 5 Ajax tutorial at Kode Blog
这篇关于使用jQuery post用Laravel将动态数据传递到引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
