使用 jQuery post 使用 Laravel 将动态数据传递给引导模式

Posted 2023-03-14

【中文标题】使用 jQuery post 使用 Laravel 将动态数据传递给引导模式

【英文标题】：Passing dynamic data to bootstrap modal with Laravel using jQuery post

【发布时间】：2017-10-14 03:26:46

【问题描述】：

我正在尝试将动态数据传递给引导模式。我想要做的是通过使用 jQuery 发布请求传递数据 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 >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。任何帮助深表感谢。谢谢

【问题讨论】：

你需要 paas 路由而不是刀片文件的名称

我已经尝试过了，但我似乎无法让它工作

能否请您也发布您的路由文件和控制器方法？

@YasenSlavov 我在下面发布了它们。谢谢

【参考方案1】：

编辑： 我的路线是：

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

我的功能是

public function viewUser(Request $request)

    $user = User::where('id', $request->id)->first();
    $langs = Language::all();
    $children = Child::where('user_id', $request->id)->get();
    $usrlang = DB::table('language_user')->where('user_id', $request->id)->get();
    $usrhob = DB::table('user_hobbies')->where('user_id', $request->id)->get();
    $userCh = [];
    $userLang = [];
    $userHobby = [];
    $chLang = [];
    $chHobby = [];

    foreach ($usrlang as $language)
        $userLang[] = $language;
    
    foreach ($usrhob as $hobby)
        $userHobby[] = $hobby;
    
    foreach ($children as $child)
        $userCh[] = $child;
        $languagesCh = DB::table('child_language')->where('child_id', $child->id)->get();
        $hobbiesCh = DB::table('child_language')->where('child_id', $child->id)->get();
        foreach ($languagesCh as $chL)
            $chLang[] = $chL;
        
        foreach ($hobbiesCh as $chH)
            $chHobby[] = $chH;
        
    

    return view('detail', compact('user','langs', 'children', 'usrlang', 'usrhob', 'userCh', 'userLang', 'userHobby', 'chHobby', 'chLang'));

【参考方案2】：

刀锋与雄辩 首先，不建议在您的刀片视图中进行有说服力的查询，因为这违背了它的最初目的。 正确的做法是说你有这个控制器：

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 >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 LaracastsLaravel 5 Ajax tutorial at Kode Blog