Question

我正在尝试将动态数据传递给bootstrap模式。我想要做的是通过使用jQuery post请求传递data-id。我的视图users包含用户列表。当我点击details按钮我希望使用jquery post传递id然后使用eloquent时，检索每个用户的所有内容。

我的观点

<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">&times;</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

    <?php

if ($_REQUEST['id']){
    $id = $_REQUEST['id'];
    echo $id;
}
$usr = \App\User::where('id', $id)->first();

?>

我不知道为什么这不起作用，我不确定我是否可以在脚本中传递一条路线而不是detail.blade.php。任何帮助深表感谢。谢谢

Answer 1

Blade and Eloquent
首先，不建议在您的刀片视图中进行有说服力的查询，因为它违背了它的初始目的适当的做法，就是说你有这个控制器：

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

<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路由来完成。

所以创建一个控制器（或使用现有的控制器）并尝试这个（在这里将控制器命名为 UserController 用于演示目的：

public function showUser($id){
     return User::findOrFail($id);
}

并在routes/api.php

中

Route::get('user/{id}', ['uses' => 'UserController@showUser']);

现在，如果你通过curl或Postman尝试你的api路线，你应该得到你的数据。

<强>的Javascript

然后在您的javascript文件中，您应将其更改为此

$.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 post/get examples at Laracasts
Laravel 5 Ajax tutorial at Kode Blog

Answer 2

编辑：我的路线是：

IF ELSE

我的功能是

    Route::post('/user/details/{id}', ['uses' => 'dataController@viewUser', 'as' => 'user.details']);

使用jQuery post将动态数据传递给Laravel的bootstrap模式

2 个答案: