使用ajax讀取XML節點

Question

我需要使用ajax來讀取xml節點值，並在現有的JavaScript函數中進一步使用這些值。

示例XML -

<cars>

<car mfgdate="1 Jan 15" name="Ford" id="1">
     <engine litres="3.0" cylinders="6"/>
</car>

<car mfgdate="1 Feb 15" name="Toyota" id="2">
     <engine litres="2.2" cylinders="4"/>
</car>

</cars>

在這里，我需要在屏幕上一次顯示一輛車的詳細信息（Ex.Ford）。 UI上有單獨的字段，用於顯示名稱，mfgdate，升和柱面等詳細信息。

如果用戶按下一個按鈕，則下一個車（例如豐田）的詳細信息應出現在屏幕上。 我需要進行ajax調用才能執行此操作。

任何幫助深表感謝。

謝謝。

Ajax Call

$(document).ready(function(){ 
    $.ajax({ type: "GET",
             url: "Cars.xml", 
             dataType: "xml",        
             success: function (xml) { 
                    var xmlDoc = $.parseXML(xml);
                    $xml = $(xmlDoc); 
                    $xml.find('events event date').each(function () { 
                                                         alert($(this).text() + "<br />"); 
                                                    }); 
             }
           });
});

Answer 1

你可以在這里找到一個例子，但你只需將解析部分放在你的ajax響應調用中（並且也可以在設計樣式時使用）：

 var xmlString = '<cars>'+ '<car mfgdate="1 Jan 15" name="Ford" id="1">'+ '<engine litres="3.0" cylinders="6"/>'+ '</car>'+ '<car mfgdate="1 Feb 15" name="Toyota" id="2">'+ '<engine litres="2.2" cylinders="4"/>'+ '</car>'+ '<car mfgdate="1 Jan 16" name="SONACOM" id="3">'+ '<engine litres="4.0" cylinders="8"/>'+ '</car>'+ '</cars>'; // used to inc or decrements throw cars var i = 0; $(document).ready(function(){ xml = $.parseXML( xmlString ); $xml = $( xml ); $cars = $xml.find( "car" ); getCar($cars) $("#btnnext").click(function(){ i++; getCar($cars); }) $("#btnprev").click(function(){ i--; getCar($cars); }) function getCar(cars) { var html =""; if(cars.length != 'undefined') { if(cars.length > 0) { if(i<cars.length){ var name = $(cars[i]).attr('name'); var mfgdate = $(cars[i]).attr('mfgdate') var $engine = $(cars[i]).find('engine'); var litres = $($engine).attr('litres'); var cylinders = $($engine).attr('cylinders'); html += "<div>Name : "+name+"</div>"; html += "<div>Mfgdate : "+mfgdate+"</div>"; html += "<div>Litres : "+litres+"</div>"; html += "<div>Cylinders : "+cylinders+"</div>"; $("#carinfo").html(html); btnClick(); } } } } function btnClick() { i == 0 ? $("#btnprev").attr("disabled","disabled") :$("#btnprev").removeAttr("disabled"); i == $cars.length-1 ? $("#btnnext").attr("disabled","disabled") : $("#btnnext").removeAttr("disabled"); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnprev" disabled>prev</button> <button id="btnnext" disabled>next</button> <br> <br> <div id ="carinfo"> </div>