使用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调用

$(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>