[JQ权威指南]get实现异步获取XML文档数据

最新推荐文章于 2022-01-23 08:06:22 发布

厦门德仔

最新推荐文章于 2022-01-23 08:06:22 发布

阅读量3.6k

点赞数

分类专栏： # JQuery 文章标签： get

本文链接：https://blog.csdn.net/david_520042/article/details/51888297

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

(1)将人员资料信息保存到一个XML，通过全局函数$.get()打开XML格式的文档并获取文档中的全部数据，显示在页面中。

(2)实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>get实现异步获取XML文档数据</title>
       <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <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.find("name").text() + "<br>";
                        strHTML += "性别：" +
                        $strUser.find("sex").text() + "<br>";
                        strHTML += "邮箱：" +
                        $strUser.find("email").text() + "<hr>";
                    })
                    $("#divTip").html(strHTML);
                })
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" 
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

UserInfo.xml

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>龚德辉</name>
    <sex>男</sex>
    <email>258365567@qq.com</email>
  </User>

  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>