如何在HTML中对同一个div调用多个不同的AJAX调用

Question

所以我正在从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辆汽车。 有任何想法吗？

Answer 1

创建一个新的div而不是将其附加到现有的html中现在，您已经将其存储在变量中，可以将任何想要的内容附加到它上

$.each(carInfo,function(i,car){
    //create a new div to store car info
    var myNewDiv = $('<div class="car-info"></div>');

    // append car properties to the info div
    myNewDiv.append(car.carSive);
    myNewDiv.append(car.carId);  //etc

    // append the new div to existing html
    $('.whiteBar').append(myNewDiv);
});

Answer 2

你能做点什么：

$(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);
    }

   });     
});

Answer 3

如果您一次性购买所有汽车，这是一个通用解决方案：

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',       
    }
];

function getCarHTML (car){
    var carHtml = '<div class = "box1" class="car-' + car.carId + '" data-id="' + car.carId + '">' +
        '<div id = "carPrice">' + car.carPrice + '</div>' +
        '<div id = "carRate">' + car.carRate + '</div>' +
        '<a href = "" class="select-btn" data-id="' + car.carId + '">SELECT</a>' +
        '<div id = "total">' + car.carPrice + '</div>' +
    '</div>' +
    '<div class = "box2">' +
        '<div class = "carSize">' + car.carSize + '</div>' +
    '</div>';
    return carHtml;
};

//this is your ajax on success function
var showCars = function (cars) {
    var $carContainer = $('#car-info-container');
    cars.forEach(function(car) {
        var carHTML = getCarHTML(car);
        var $carIfPreset = $carContainer.find('.car-' + car.carId);
        if ($carIfPreset.length) {
            $carIfPreset.replaceWith(carHTML);
        } else {
            $carContainer.append(carHTML);
        }
    });
};

//calling function here, you should make this call inside your ajax
//Assuming ajax to return an array of cars
showCars(carInfo);

这是一个工作的jsfiddle： https ://jsfiddle.net/fjh3mjtm/

预期的json是{cars：[{carId：1，carPrice：35.00，...}，{carId：2，carPrice：37.00，...}，...]}

Answer 4

我不太确定这是否适合您的需求，但是在这种情况下，我对jsRender http://www.jsviews.com/感到很幸运。

如何在HTML中对同一个div调用多个不同的AJAX调用

问题描述

4 个解决方案

解决方案1
1 2015-06-03 19:37:06

解决方案2
1 已采纳 2015-06-03 19:37:23

解决方案3
0 2015-06-03 19:52:43

解决方案4
0 2015-06-03 19:55:56

如何在HTML中对同一个div调用多个不同的AJAX调用

问题描述

4 个解决方案

解决方案1 1 2015-06-03 19:37:06

解决方案2 1 已采纳 2015-06-03 19:37:23

解决方案3 0 2015-06-03 19:52:43

解决方案4 0 2015-06-03 19:55:56

解决方案1
1 2015-06-03 19:37:06

解决方案2
1 已采纳 2015-06-03 19:37:23

解决方案3
0 2015-06-03 19:52:43

解决方案4
0 2015-06-03 19:55:56