我GET
向页面发出请求以加载内容,使用axios
文件app.js
的请求:
const axios = require("axios");
document.addEventListener("DOMContentLoaded", function() {
axios.get("/get-cards")
.then(response => {
$("#content").html(response.data)
})
.catch(error => {
console.log(`ERROR: ${error}`)
});
});
它所在的页面#content
:
<div id="content">
<!-- сюда загружается контент -->
</div>
请求发送到的页面(在“/get-cards)”:
@foreach($technics as $technic)
<div class="technic-card">
<div class="card-img-slider">
<img src="{{ $technic->img_1 }}" alt="{{ $technic->name }}">
<img src="{{ $technic->img_2 }}" alt="{{ $technic->name }}">
<img src="{{ $technic->img_3 }}" alt="{{ $technic->name }}">
</div>
<div class="card-name">{{ $technic->name }}</div>
<div class="card-type">{{ $technic->type }}</div>
<div class="card-footer">
<div class="card-price">{{ $technic->price }}/час</div>
<div class="card-buy-btn">арендовать</div>
</div>
</div>
@endforeach
并且当页面所在的#content
页面加载1-2秒时,如何让在请求完成之前#content
(div
带有加载动画的块)而不是加载窗口有一个加载指示器?
您可以最初将其放入页面代码中
它会在加载后立即显示,并在来自服务器的响应时替换为内容