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

Posted 2023-03-14

【中文标题】加载资源失败：服务器使用 laravel 8 / ajax 响应状态为 404（未找到）

【英文标题】：Failed to load resource: the server responded with a status of 404 (Not Found) using laravel 8 / ajax

【发布时间】：2021-09-10 18:09:10

【问题描述】：

我正在尝试在 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.'" 
                                        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" 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.

而且我认为：

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

提前谢谢你

【问题讨论】：

与给定路由匹配的路由定义在哪里？您尝试过什么来解决问题？你被困在哪里了？

路由定义在我的脚本中

不，不是。您代码中的路由定义仅涵盖/getCasting/id_casting，很明显这与castingimages/%22不匹配

这就是问题所在，例如getCasting/18

那么您需要调整发出该请求的代码 - 好吧，取决于您尝试解决的问题？当您在 img 标记中调用此类 URL 时会给出错误消息，但您没有在 AJAX 请求中使用它

【参考方案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
);

参考Similar Solution

【讨论】：

@lourdkenny，谢谢你的帮助，我做到了，但我总是收到这个错误：The requested resource /castingimages/%22 was not found on this server.

不知道为什么不调用url route("getCasting", ":id_casting") ，而是调用图片的url