script type="text/javascript'>
$(funciton(){
$.ajaxSetup({
url: "UserInfo.xml",
type: "GET",
dataType:"xml",
timeout:1000,
global:true,
async:true,
cache:true,
});
$("#btn1").click(function(){
$.ajax({
success: function(data){
console.log(data);//请求响应后返回的数据
showData(data,"名字","name");
}
})
})
$("#btn2").click(function(){
$.ajax({
success: function(data){
console.log(data);
showData(data,"性别","sex");
}
})
})
$("#btn3").click(function(){
$.ajax({
success: function(data){
console.log(data);
showData(data,"邮编","email");
}
})
})
//处理数据的函数
showData ( d, n, v ) {
$("#divTip").empty();
var strHTML = "";
$(d).find("User").each(function(){
var $strUser = $(this);
strHTML += n +“:”+ $strUser.find(v).text()+"<hr>";
})
$("#divTip").html(strHTML);
}
})
</script>
<body>
<div class="divFrame">
<div class="divTitle">
<span><input id="Button1" type="button" value="姓名" class="btn"/></span>
<span><input id="Button2" type="button" value="性别" class="btn"/></span>
<span><input id="Button3" type="button" value="邮箱" class="btn"/></span>
</div>
<div class="divContent">
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>
UserInfo.xml
<?xml version = "1.0" encoding= "utf-8" ?>
<Info>
<User id="1">
<name>MGT360124</name>
<sex>男</sex>
<email>MGT360124@163.com</email>
</User>
<User id="2">
<name>YSS</name>
<sex>女</sex>
<email>YSS360124@163.com</email>
</User>
</Info>
成长前端初学者
相关分类