jquery - 加载资源失败：服务器使用 laravel 8 / ajax 响应状态为 404（未找到）

Question

我正在尝试在 HTML bloc 中显示图像，所以我正在尝试以下代码。

所以我使用以下代码：

我的路线：

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

我的控制器：

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

$(document).ready(function() {

  $("body").on("click", ".add_new_frm_field_btn", function() {
    var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
    var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
    //added data-index and outer..class
    $(".form_field_outer").append(`<div class="col-12 outer" data-index="${index}_${random}"><div class="card-body form_field_outer_row"> <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><option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option> </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></div></div> `);
    $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
    $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
  });
  $("body").on("click", ".remove_node_btn_frm_field", function() {
    var index = $(this).closest(".outer").data('index') //get index
    $(".casting_details [data-index= " + index + "]").remove() //remove genrated casting_details2 as well
    $(this).closest(".outer").remove()
  })
  $("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("<img src=...../>"); //data

    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col-12">
  <div class="card mb-4 form_field_outer">
    <!--added outer and data-index-->
    <div class="card-body form_field_outer_row outer" data-index="0">
      <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>
              <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
            </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>
            <button type="button" class="btn btn-outline-warning mb-1 add_new_frm_field_btn">Add</button>
          </div>
        </div>
      </form>
    </div>

  </div>


</div>
<div>
  <div class="card mb-4 casting_details ">
<!-- will come here-->
  </div>

当我执行我的代码时，我收到以下错误：

The requested resource /castingimages/%22 was not found on this server.

我认为：

我不知道我的代码中的问题在哪里，如果你有任何想法我会

先感谢您

标签： jqueryajaxlaravel

Answer 1

错误来自您添加id_casting到 URL 的部分。

我重构为命名路线。

Route::get('/getCasting/{id_casting}','App\Http\Controllers\ProjetController@getCasting')->name('getCasting');

尝试将其用于 AJAX 请求。

let id_casting = $(this).find("option:selected").data("id");
let url = '{{ route("getCasting", ":id_casting") }}';
url = url.replace(':id_casting', id_casting);

$.get(url, function (data) {
    //add content inside that
    $(".casting_details [data-index=" + index + "]").html("<img src=...../>"); //data
});

参考类似解决方案