jquery - 使用 Laravel 按所选项目显示数据库中的图像

Question

我正在尝试从数据库中获取数据。

我有一个选中的框，当我选择一个项目时，我应该获取 id 并在一个块中显示所选项目的图像。

所以我使用以下代码：

我的观点：

<div class="row">
                        <div class="col-12">
                            <div class="card mb-4 form_field_outer  ">
                                <div class="card-body form_field_outer_row ">
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="inputState">Casting</label>
                                                <select id="id_casting" class="form-control" name="id_casting">
                                                <option selected>Choose...</option>
                                                @foreach($castings as $casting)
                                                   <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
                                                @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="inputState">Type de contrat</label>
                                                <select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
                                                <option selected>Choose...</option>
                                                <option>...</option>
                                                </select>
                                            </div>
                                            <div class="card-body ">
                                                <button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
                                            </div>
                                        </div> 
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
     <div class="card mb-4 casting_details ">
              
                         <!-- Pictures ot the selected casting will come here-->
    
                    </div>

我的脚本：

$("body").on("change", "select[name=id_casting]", function() {
    var index = $(this).closest(".outer").data('index') //get outer div index..

    //check if the data-id not there
    if ($(".casting_details [data-index= " + index + "]").length == 0) {
      //append new...
      $(".casting_details").append(`<div data-index= "${index}" class="card-body casting_details2"> <div class="d-flex flex-row mb-3 "> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"class="list-thumbnail border-0" /> <span  class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);
    }
    let id_casting = $(this).find("option:selected").data("id");
    $.get('/getCasting/' + id_casting, function(data) {


  
    //add content inside that
    $(".casting_details [data-index= " + index + "]").html(`
                    <div class="d-flex flex-row mb-3 ">
        <a class="d-block position-relative" href="#">
                            <img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"
                            class="list-thumbnail border-0" />
                            <span
                            class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
                        </a>
                        
                        </div>`); //data

    //});

      })
  });

我的控制器：

public function getCasting()

    {
        $id_casting = request('id_casting');

        $castings = Casting::where('id_casting',$id_casting)->get();

       /* dd($states);*/
    
        $option = "<div class='d-flex flex-row mb-3 casting_details2'>
                                    <a class='d-block position-relative' href='#'>
                                        <img src='img/products/marble-cake-thumb.jpg' alt='Marble Cake'
                                        class='list-thumbnail border-0' />
                                        <span
                                        class='badge badge-pill badge-theme-2 position-absolute badge-top-right'>NEW</span>
                                    </a>
                                </div>";


        foreach($castings as $casting){
            $option.= '<div class="d-flex flex-row mb-3 casting_details2">
                                    <a class="d-block position-relative" href="#">
                                        <img src="/castingimages/'.$casting->photo.'" alt="Marble Cake"
                                        class="list-thumbnail border-0" />
                                        <span
                                        class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
                                    </a>
                                </div>';
        }
        return $option;
    }

我的路线：

Route::group(['middleware' => ['auth','role:account_manager|admin|manager_de_filiale']], function() {  
  Route::get('/getCasting/{id_casting}','App\Http\Controllers\ProjetController@getCasting');
});

执行我的代码时没有任何反应，没有错误。

而且我不知道如何将每个选定项目 id 的图像传递给 bloc<img>

现在我只是制作一个图像路径来显示它

更新

脚本：

 $("body").on("change", "select[name=id_casting]", function() {
    var index = $(this).closest(".outer").data('index') //get outer div index..

    //check if the data-id not there
    if ($(".casting_details [data-index= " + index + "]").length == 0) {
      //append new...
      $(".casting_details").append(`<div data-index= "${index}" class="card-body casting_details2"> <div class="d-flex flex-row mb-3 "> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"class="list-thumbnail border-0" /> <span  class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);
    }
    let id_casting = $(this).find("option:selected").data("id");
    $.get('/getCasting/' + id_casting, function(data) {

    //add content inside that
    $(".casting_details [data-index= " + index + "]").html(`
                    <div class="d-flex flex-row mb-3 ">
        <a class="d-block position-relative" href="#">
        <img src={{ URL::to('/') }}/castingimages/" + $castings->photo} +  " class="list-thumbnail border-0"  />
                            <span
                            class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
                        </a>
                        
                        </div>`); //data

    //});

      })
  });

控制器 ：

public function getCasting()

    {
        $id_casting = request('id_casting');

        $castings = Casting::where('id_casting',$id_casting)->get();

       return view('Projet.ajout_projet')
            ->with('castings', $castings);
    }

我收到以下错误：

jquery-3.3.1.min.js:2 GET http://localhost:8000/getCasting/16 404 (Not Found)

标签： jqueryajaxlaravel