如何在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