有时我们会遇到使用XML文档保存数据的情况,对于这种格式的数据,jQuery中使用全局函数$.get()进行访问,其调用语法格式为:$.get(url,[data],[callback],[type])
其中,参数url表示等待加载的数据地址,可选项[data]参数表示发到服务器的数据,其格式为key/value,可选项[callback]参数表示加载成功时执行的回调函数,可选项[type]参数表示为key/value,可选项[type]参数表示返回数据的格式,如HTML,XML,JS,JSON,TEXT等。
(1)功能描述
将人员资料信息保存到一个XML格式文档UserInfo.xml中,另外新建一个页面,在页面里单击“获取数据”按钮,通过全局函数$.get()打卡XML格式的文档UserInfo.xml,并获取文档中的全部数据,显示在页面中。
(2)实现代码
新建一个HTML文件xxx.html(get实现异步获取XML文档数据)
<script type="text/javascript">src="Jscript/jquery"</script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){ //按钮单击事件
//打开文件,并通过回调函数处理获取的数据
$.get("UserInfo.xml",function(data){
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("user")
.each(function(){ //遍历获取的数据
var $strUser = $(this);
strHTML += "姓名:" + $strUser.fin("name").text() + "<br>";
strHTML += "性别:" + $strUser.fin("sex").text() + "<br>";
strHTML += "邮箱:" + $strUser.fin("email").text() + "<br>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
另外,新建一个XML文件UserInfo.xml,该文件的代价内容如下所示:
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>tgr</name>
<sex>man</sex>
<email>tao_guo_rong@163.com</email>
</User>
<User id="2">
<name>ljz</name>
<sex>woman</sex>
<email>xiaoli@163.com</email>
</User>
</Info>
代码分析:
在示例的JS代码中,先通过each()方法遍历文档中的User节点,然后在遍历的过程使用find方法,查询该节点中的name,sex,email选项,并通过text()方法获取各选项的值,最后,将各值以叠加的形势保存到变量strHTML,并显示在页面里。