未捕获的类型错误：无法使用 Laravel 和 AJAX 读取未定义的属性“”
[英]Uncaught TypeError: Cannot read property '' of undefined using Laravel and AJAX
问题描述
I have the following select box:
我有以下选择框：
<select class="form-control select2-single" data-width="100%" name="numero_projet" id="numero_projet">
<option label=" "> </option>
@foreach($projets as $projet)
<option data-id="{{$projet->id_projet}}" value="{{$projet->id_projet}}">{{$projet->numero_projet}}</option>
@endforeach
</select>
And the following ajax code to get data :以及以下获取数据的ajax代码：
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
success:function(html){
var content = html.content;
$("div.name_casting").append(content.id_casting);
}
})
})
})
</script>
And the following controller:以及以下控制器：
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return response()->json(['projets_casting' => $projets_casting]);
}
}
And I have the following view where I should display the data that I get from controller:我有以下视图，我应该在其中显示从控制器获得的数据：
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select from Library</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@foreach($projets_casting as $projet_casting)
<div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
<div class="accordion" id="accordion">
<div class="mb-2">
<button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="icon-container">
<i class="simple-icon-arrow-down"></i>
</span>
<span class="folder-name">Castings</span>
</button>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100">
<p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
</div>
</div>
</div>
It should display in this div the id_casting of each projects它应该在这个 div 中显示每个项目的id_casting
<div class="w-100 name_casting">
<p class="truncate mb-0">ok</p>
</div>
But I get the following error:但我收到以下错误：
Uncaught TypeError: Cannot read property 'id_casting' of undefined
What is wrong with my code?我的代码有什么问题？
Update更新
I have the following HTML in my view:在我看来，我有以下 HTML：
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container casting2">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100 castings">
<p class="truncate mb-0">OK</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I'm trying the following script:我正在尝试以下脚本：
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = ` <div">
<p class="truncate mb-0">${json.id_casting}</p>
</div>`;
$("div.name_casting").append(content);
}
})
})
</script>
But I have nothing.但我什么都没有。 I have always OK and I have no error!我一直都OK ，我没有错误！
UPDATE2更新2
Now I can get the data that I want, but I get multiple rows in the same time so I should having multiple divs in my HTML.现在我可以获得我想要的数据，但是我同时获得了多行，所以我的 HTML 中应该有多个 div。
I'm getting the following result:我得到以下结果：
While I shoult get the 18 in a div and 19 in other div and not in the same place.虽然我应该在一个 div 中获得 18 和在其他 div 中获得 19 而不是在同一个地方。
1 个解决方案
解决方案1
0 2021-07-14 10:23:24
Analogous to @professor 's answer :类似于@professor的回答：
- Use the JSON (recommended)使用 JSON （推荐）
The Controller doesn't have to be modified控制器无需修改
In your blade/JavaScript, change the following:在您的刀片/JavaScript 中，更改以下内容：
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = `<div>
${json.castings.map((casting) => casting.id_projet)}
</div>`;
$("div.name_casting").append(content);
}
- Use the HTML使用 HTML
The blade view and JavaScript刀片视图和 JavaScript
In your controller, change the following:在您的控制器中，更改以下内容：
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return view('your-view', ['projets_casting' => $projets_casting]);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
select2 ajax：未捕获的TypeError：无法读取未定义的属性“上下文” - select2 ajax : Uncaught TypeError: Cannot read property 'context' of undefined
未捕获的TypeError：在Ajax调用后无法读取未定义的属性'appendChild' - Uncaught TypeError: Cannot read property 'appendChild' of undefined after Ajax call
未捕获的类型错误：无法读取 AJAX object 上未定义的属性“映射” - Uncaught TypeError: Cannot read property 'map' of undefined on AJAX object
Ajax未捕获的TypeError：无法读取未定义的属性'length' - Ajax Uncaught TypeError: Cannot read property 'length' of undefined
ReactJS和AJAX未捕获的TypeError：无法读取未定义的属性“错误” - ReactJS and AJAX Uncaught TypeError: Cannot Read Property 'bugs' of Undefined
AJAX：未捕获的类型错误：无法读取未定义的属性“长度” - AJAX: Uncaught TypeError: Cannot read property 'length' of undefined
Laravel 4-未捕获的TypeError：无法读取未定义的属性'post' - Laravel 4 - Uncaught TypeError: Cannot read property 'post' of undefined
未捕获的TypeError：无法读取未定义的属性“未定义” - Uncaught TypeError: Cannot read property 'undefined' of undefined
Solved: ReactJS: Uncaught TypeError: Cannot read property 'id' of undefined when posting to a Laravel Controller using axios - Solved : ReactJS : Uncaught TypeError: Cannot read property 'id' of undefined when posting to a Laravel Controller using axios
Uncaught TypeError：无法读取undefined的属性“ setVisible”，使用敲除进行过滤 - Uncaught TypeError: Cannot read property 'setVisible' of undefined , filtering using knockout
相关标签