如何使用 Laravel 在引导模式中获取动态数据？答案

【问题标题】：How to get dynamic data in bootstrap modal by using Laravel?如何使用 Laravel 在引导模式中获取动态数据？
【发布时间】：2019-08-16 10:30:57
【问题描述】：

我正在开发一个应用程序，该应用程序需要在每次点击我的不同图标列表时显示数据。问题是如何根据 id 在引导模式中显示数据。提前致谢。

在这里，我试过了，但没有全部工作..

       <div class="col-xs-12 col-sm-6 col-md-3">

                @foreach($Play as $post)
                <div class="member">
                    <div class="member-img">
                        @if ($post->new_game)
                            <img src="{{ $post->new_game}}" alt="member" />@endif

                    </div>
                    <!-- .member-img end -->
                    <div class="member-info">
                        <h5>{{$post->friendly}}</h5>
                        <h6>{{$post->enemy}}</h6>
                        <div class="divider--line divider--center"></div>
                        <p>{{ $post->weapon }}</p>

                        <button type="button" class="btn btn--primary btn--link" href="#" data-toggle="modal" data-target="#myModal" id="{{$post->id }}" onclick="showDtails">Get more weapon detials</button>

                    </div>


                </div>
                @endforeach

                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">


                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
                            </div>
                            <div class="modal-body">
                                <img src="/app/assets/images/team/thumb/1.jpg">
                                <p>{{$post->full_weapon}}</p>
                            </div>

                        </div>

                    </div>
                </div>

            </div>



        </div>

【问题讨论】：

标签： laravel laravel-5 eloquent

【解决方案1】：

HTML 应该是这样的

<div id="myModal" class="modal fade" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
         </div>
         <div class="modal-body">

         </div>
      </div>
   </div>
</div>

按钮

<button type="button"  data-toggle="modal" data-target="#myModal" onclick="showDtails({{$post->id }})">Get more weapon detials</button>

用ajax调用函数

function showDtails(postid){
    $.ajax({
                url : '{{ route("getdata") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data:{postid:postid},
                success:function(data){

                    $('.modal-body').html(data)

                },

            });
}

Route.php

Route::post('/getdata', 'HomeController@getdata')->name('getdata');

控制器.php

public function getdata(Request $request){
    $postid = $request->postid;
    $post = Post::where('id',$postid)->first();
    return view('getdata',compact('post'));
}

getdata.blade.php 文件

<div>
    //whatever you write here or display here you'll get this data to your bootstrap model.
</div>

【讨论】：

@thanks Greg，我试过了，但仍然没有任何反应

【解决方案2】：

你需要点击一个包含你需要的数据的get api，当收到响应时，用javascript填充值，然后显示模态

【讨论】：

谢谢，怎么做，有没有示例代码可以看一下

【解决方案3】：

只需在脚本标签中编写函数

function showDtails(){
    $( ".modal-body" ).load("/admin/edit_location", function() {
        $( "#myModal" ).modal('show');
    });
}

/admin/edit_location 是加载视图的路径，下面是路径的功能：

public function GetEditLocationsModal(){
    return view('modals.admin_edit_current_location');
}

【讨论】：

是的，如果您愿意，您可以将 id 作为参数传递。如果对您有帮助，请点赞回答

【解决方案4】：

使用 javascript 或 js 框架（如 vuejs）或库（如 jquery）

axios|ajax 调用控制器->控制器发回相应数据->模态显示

//show modal 
$('#myModal').modal('show');

//hide modal
$('#myModal').modal('hide')

对不起，我的英语不好，但我可以提供帮助。

更新

看看这个例子你就会明白

welcome.blade.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">

      <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">

     <title>{{ config('app.name', 'Laravel') }}</title>

    <title>Document</title>
</head>
<body>

    <ul class="list-group">

        <li ><button type="button" id="btn1" class="btn btn-primary m-3" onclick="get('btn1')">button 1</button></li>
        <li ><button type="button" id="btn2" class="btn btn-primary m-3" onclick="get('btn2')">button 2</button></li>
        <li ><button type="button" id="btn3" class="btn btn-primary m-3" onclick="get('btn3')">button 3</button></li>

    </ul>

    <div class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p id="modalBody">Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

</body>
</html>

<script>

function get(btn) {

// send data and recive response from controller

axios.post('/getData',{ // send

    btnClick:btn 

}).then(res =>{ // recive

    $('.modal').modal('show'); // open modal

    $('#modalBody').empty().append(res.data); // append data in modal body


});

}

</script>

web.php

Route::post('/getData', 'apiController@index');

控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class apiController extends Controller
{

    public function index(Request $request)
    {

        switch( $request->btnClick){

            case 'btn1':

                return 'data for button 1';

                break;

                case 'btn2':

                return 'data for button 2';

                break;

                case 'btn3':

                return 'data for button 3';

                break;

        }

    }

}

也许您想根据当前用户 ID 从控制器发送响应。然后使用 auth()->user()->id

【讨论】：

谢谢@shsaleh 我经历了这个但仍然显示错误