怎么在jQuery中利用Ajax读取XML数据

怎么在jQuery中利用Ajax读取XML数据?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

具体如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="JqueryAjax_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>www.jb51.netjQuery使用ajax获取xml</title>
<styletype="text/css">
</style>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#Display").click(function(){
$("#message").html('');
$.ajax({
type:"GET",
url:"Friend.xml",
dataType:"xml",
success:function(ResponseText){
vartable="<tableborder='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
$(ResponseText).find('friend').each(function(){
varfirst=$(this).find('firstName').text();
varlast=$(this).find('lastName').text();
varcity=$(this).find('city').text();
table+="<tr><td>"+first+"</td><td>"+last+"</td><td>"+city+"</td></tr>";
})
table+="</table>";
$("#message").append(table);
}
});
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<label>DisplayMyFriends</label><br/>
<inputtype="button"value="Display"id="Display"/>
<divid="message"></div>
</form>
</body>
</html>

Friend.xml:

<?xmlversion="1.0"encoding="utf-8"?>
<friends>
<friend>
<name>
<firstName>Guo</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>Shanghai</province>
<city>PuDong</city>
</address>
</friend>
<friend>
<name>
<firstName>Lei</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>hubei</province>
<city>xiantao</city>
</address>
</friend>
<friend>
<name>
<firstName>JunWen</firstName>
<lastName>Li</lastName>
</name>
<address>
<province>hubei</province>
<city>wuhan</city>
</address>
</friend>
<friend>
<name>
<firstName>Jinhao</firstName>
<lastName>Liu</lastName>
</name>
<address>
<province>ShanXi</province>
<city>Taiyuan</city>
</address>
</friend>
<friend>
<name>
<firstName>Cheng</firstName>
<lastName>Fang</lastName>
</name>
<address>
<province>GuangDong</province>
<city>GuangZhou</city>
</address>
</friend>
</friends>

运行结果:

怎么在jQuery中利用Ajax读取XML数据

看完上述内容,你们掌握怎么在jQuery中利用Ajax读取XML数据的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!

发布于 2021-04-08 13:38:07
收藏
分享
海报
0 条评论
176
上一篇:怎么在d3.js中自定义一个多y轴折线图 下一篇:如何在python中使用requests上传多个文件
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码