jQuery中异步加载XML文档(ajax在jQuery中的运用学习第五天)

        有时我们会遇到使用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,并显示在页面里。









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值