所以我正在从 JSON 文件读取数据。然后我就可以成功地使用 AJAX 调用来更新 HTML 代码中的 div。例如:
$("#carSize").append(carInfo[0].carSize);
div carSize 将从 JSON 文件获取数据。然而，将会有 10 辆不同的汽车，它们具有许多不同的属性，例如 carSize。由于 carInfo 数组很大并且充满了几个不同的属性，因此有没有一种更简单的方法可以实现此目的，而无需创建不同的 div 来附加到每辆车的属性。
HTML:
<html>
<link href="json.css" rel="stylesheet" type="text/css">
<body>
<div class = "whiteBar">
<div id = "box1">
<div id = "carPrice"></div>
<div id = "carRate"></div>
<a href = "" id = "selBut">SELECT</a>
<div id = "total"></div>
</div>
<div id = "box2">
<div id = "carSize"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="my_script.js"></script>
</body>
</html>
JS
$(document).ready(function()
{
$.getScript("vehicle_data.json", function()
{
$("#carPrice").append(carInfo[0].carPrice + ".00");
$("#carRate").append(carInfo[0].carRate);
$("#total").append("Total: " + carInfo[0].carPrice * 7 + ".00 USD");
$("#carSize").append(carInfo[0].carSize);
});
});
JSON(示例)
var carInfo = [
{
carId: 1,
carPrice : 35.00,
carRate : 'USD/DAY',
carSize : 'Extra Small Car',
type : 'Economy',
},
{
carId: 2,
carPrice : 37.00,
carRate : 'USD/DAY',
carSize : 'Small Car',
type : 'Compact',
}
];
请注意，JS 代码仅适用于 1 辆车，而我需要为其他 9 辆车完成它。有什么想法吗？
最佳答案
你能做这样的事情吗:
$(document).ready(function(){
$.getScript("vehicle_data.json", function() {
for(i=0; i<carInfo.length; i++){
var $carContainer = $('<div class="carContainer-'+i+'"></div>');
$carContainer.append('<div id="carPrice-'+i+'">'+carInfo[i].carPrice + ".00"+'</div>')
.append('<div id="carRate-'+i+'">'+carInfo[i].carRate+'</div>')
.append('<div id="total-'+i+'">'+"Total: " + carInfo[i].carPrice * 7 + ".00 USD"+'</div>')
.append('<div id="carSize-'+i+'">'+carInfo[i].carSize+'</div>');
$('body').append($carContainer);
}
});
});
关于javascript - 如何在 HTML 中对同一个 div 进行多个不同的 AJAX 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30628884/