Fatal编程技术网
  • laravel/
  • 如何使用Laravel在bootstrap模式中获取动态数据？

如何使用Laravel在bootstrap模式中获取动态数据？

laravel laravel-5

如何使用Laravel在bootstrap模式中获取动态数据？,laravel,laravel-5,eloquent,Laravel,Laravel 5,Eloquent,我正在开发一个应用程序，它需要在每次点击我的不同图标列表时显示数据。问题是如何根据id在引导模式中显示数据。请提前感谢 在这里，我试过了，但不是全部 <div class="col-xs-12 col-sm-6 col-md-3"> @foreach($Play as $post) <div class="member"> <div class="

我正在开发一个应用程序，它需要在每次点击我的不同图标列表时显示数据。问题是如何根据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>


@foreach（$Play as$post）
@如果（$post->new_游戏）
新建游戏}“alt=”member“/>@endif
{{$post->friendly}
{{$post->敌人}
{{$post->武器}

获取更多武器详情
@endforeach
&时代；
{{$post->id}
{{$post->全套武器}

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

只需在脚本标记中写入函数即可

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');
}
使用javascript或js框架（如vuejs）或库（如jquery）

axios |对控制器的ajax调用->控制器发回相应数据->在模式中显示

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

//hide modal
$('#myModal').modal('hide')
对不起，我的英语不好，但我尽我所能帮助你

更新

看看这个例子，你就会明白了

欢迎使用.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>

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

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

<?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;

        }

    }

}

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>


Route.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>



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



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


Controller.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>




//无论您在这里写什么或在这里显示什么，都会将这些数据保存到引导模型中。

Thank@shsaleh我已经讲过了，但仍然显示了错误谢谢，怎么做，你有没有示例代码可以讲一遍是的，如果你愿意，你可以通过id作为参数。如果有帮助，请投票回答you@thanks格雷格，我试过了，但还是什么都没发生