javascript - 使用 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 上有单独的字段来显示名称、制造日期、升和气瓶等详细信息。

如果用户按下一个按钮，那么下一辆车(例如丰田)的详细信息应该会出现在屏幕上。我需要进行 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>