저는 Laravel 프레임 워크를 처음 접했고 부트 스트랩 카드를 사용하여 간단한 자동차 목록 웹을 개발하려고합니다. Jquery append () 메서드를 사용하여 Controller에서 데이터를 채우는 것을 포함하여 AJAX Get을 성공적으로 구현했습니다. 그러나 그것은 하나의 모든 자동차를 표시합니다 Card
. 각 자동차를 포함하는 각 카드를 채우는 방법?. 현재 결과 console.log 결과
public function GetCars(Request $request)
{
if ($request->ajax())
{
$cars = Car::all();
return response()->json( $cars );
}
}
<div class="album py-1">
<div class="container bg-light">
<div class="row py-2">
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<div class="hover-container">
<img src="" class="image img-thumbnail">
<a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View</a>
</div>
<div class="card-body CarDetail">
<p class="card-text font-weight-bold">Make:<span class="car_Make"></span></p>
<p class="card-text font-weight-bold">Model:<span class="car_Model"></span></p>
<div class="d-flex justify-content-between align-items-center">
<p class="font-italic table_data">Price: RM <span class="car_Year"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>
<script>
$(document).ready(function(){
$('#testbtn').click(function () {
$.ajax({
type: 'GET',
url: '/ajax/getCar',
success : function (data) {
$.each(data, function( i, car ) {
$('.car_Make').append(car.make);
$('.car_Model').append(car.model+'<br>');
$('.car_Year').append(car.year+'<br>');
});
}
});
});
});
</script>
이것이 무슨 뜻입니까?
console.log 데이터에서 일부 행을 사용하는 예제를 만들었습니다.
설명 : 데이터 배열을 반복하고 있습니다. 첫 번째 반복 인 경우 데이터를 추가합니다 ( CarDetail
코드에 하나의 div가 있습니다.
다음 반복을 위해 CarDetail
div를 복제하고 다음 데이터로 채 웁니다.
물론 페이지에 데이터를 추가하는 방법에는 더 많은 가능성이 있습니다. 예를 들어, 페이지의 첫 번째 항목을 채운 다음 두 번째 항목에서 마지막 항목까지 반복하거나 (이 경우 if / else 조건이 필요하지 않음) JS 변수에 HTML 코드를 추가 할 수 있습니다. 개인적으로 그렇게하지 않을 것입니다. 왜냐하면 매우보기 흉하고 코드의 가독성이 더 나빠질 수 있기 때문입니다.
$(document).ready(function(){
var data = [
{id:31,make:"Audi",model:"R8",year:2000},
{id:32,make:"Ferrari",model:"FF",year:2000},
{id:33,make:"Mazda",model:"Rx-7",year:2000},
{id:34,make:"Ferrari",model:"F12",year:2012},
{id:35,make:"Porsche",model:"911",year:2015},
{id:36,make:"Land Rover",model:"Vogue",year:2015},
{id:37,make:"Mercedes Benz",model:"SL350",year:2013},
{id:38,make:"Ferrari",model:"F12",year:2013},
{id:39,make:"Ferrari",model:"458",year:2013},
];
$.each(data, function( i, car ) {
if(i == 0) {
$('.card').find('.car_Make').text(car.make);
$('.card').find('.car_Model').text(car.model);
$('.card').find('.car_Year').text(car.year);
} else {
var carDetailCloned = $('.card').first().clone();
carDetailCloned.find('.car_Make').text(car.make);
carDetailCloned.find('.car_Model').text(car.model);
carDetailCloned.find('.car_Year').text(car.year);
$('.card-container').append(carDetailCloned);
}
});
});
.CarDetail{background-color:red;margin-bottom:2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-1">
<div class="container bg-light">
<div class="row py-2">
<div class="col-md-3 card-container">
<div class="card mb-3 shadow-sm">
<div class="hover-container">
<img src="" class="image img-thumbnail">
<a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View
</a>
</div>
<div class="card-body CarDetail">
<p class="card-text font-weight-bold">Make:
<span class="car_Make"></span>
</p>
<p class="card-text font-weight-bold">Model:
<span class="car_Model"></span>
</p>
<div class="d-flex justify-content-between align-items-center">
<p class="font-italic table_data">Price: RM
<span class="car_Year"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>
편집 :<div class="card mb-3 shadow-sm"
모든 카드에 대해 복제 하고 거기에 데이터를 추가 하도록 코드를 편집 했습니다. 또한 card-container
새 차를 추가 할 때 사용하기 위해 부모 요소에 클래스를 추가합니다. 충분합니까?
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다