如何解决使用Ajax的Spring View页面详细信息
我想知道您如何对另一个页面进行ajax调用以显示包含服务数据的列表
Models.html
function addItemToCart(title,price,imageSrc) {
const exists = [...document.querySelectorAll('.cart-row')].find(row => {
const target = row.querySelector('.cart-item-title');
return target && target.textContent === title;
});
if (exists) {
const input = exists.querySelector('.cart-quantity-input');
input.value = parseInt(input.value,10) + 1;
} else {
var cartItems = document.querySelector('.cart-items');
var cartRow = document.createElement('div');
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.classList.add('cart-row');
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.querySelector('.btn-danger').addEventListener('click',removeCartItem);
cartRow.querySelector('.cart-quantity-input').addEventListener('change',quantityChanged);
}
}
控制器
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Model</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Json
@CrossOrigin
@GetMapping("/cars/{id}/model")
public List<Model> getModels(@PathVariable Long id) {
Optional<Car> car = carRepository.findById(id);
return car.get().getModels();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。