关于javascript：使用ajax读取XML节点

ajaxjavascriptjqueryparsingxml

Read XML node using ajax

我需要使用ajax来读取xml节点值，并在现有的JavaScript函数中进一步使用这些值。

示例XML-

1
2
3
4
5
6
7
8
9
10
11

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

在这里，我需要一次在屏幕上显示一辆汽车(例如福特)的详细信息。
UI上有单独的字段来显示详细信息，例如名称，制造日期，升和圆柱。

如果用户按下"下一步"按钮，则下一车(例如，丰田)的详细信息应出现在屏幕上。我需要进行ajax调用。

非常感谢您的帮助。

谢谢。

Ajax呼叫

1
2
3
4
5
6
7
8
9
10
11
12
13

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

相关讨论

您可以在此处找到一个示例，但只需将解析部分放在ajax响应调用中(也可以在设计样式时使用)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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 +="Name :"+name+"";
html +="Mfgdate :"+mfgdate+"";
html +="Litres :"+litres+"";
html +="Cylinders :"+cylinders+"";

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

}

})

1
2
3
4
5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

<button id="btnprev" disabled>prev</button>
<button id="btnnext" disabled>next</button>