[jQuery]從JSON或者XML獲取數據

時間 2019-11-07

標籤 jquery json 或者 xml 獲取數據欄目 JQuery 简体版

原文原文鏈接

摘自：《jQuery權威指南》javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>j_1_2.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    
    <style type="text/css">
        body{font-size: 12px}
        
        .divFrame{
            width:320px;
            border: solid 1px #666;
        }
        
        .divFrame .divTitle{
            padding: 5px;
            background-color: #eee;
        }
        
        .divFrame .divContent{
            padding: 8px;
        }
        
        .divFrame .divContent .clsShow{
            font-size: 14px
        }
        
        .btn{
            border: solid 1px #666;
            padding: 2px;
            width: 150px;
            filter: progid:DXImageTransform.Microsoft
            .Gradient(GradientType=0, StartColorStr=#ffffff,
            EndColorStr=#ECE9D8);
        }
    </style>
    
    <script type="text/javascript">
        $(function(){
            $("#Button1").click(function(){
                $.getJSON("UserInfo.json", function(data){
                    $("#divTip").empty();
                    var strHTML = "";
                    
                    $.each(data, function(InfoIndex, Info){
                        strHTML += "姓名:" + Info["name"] + "<br>";
                        strHTML += "性別:" + Info["sex"] + "<br>";
                        strHTML += "郵箱:" + Info["email"] + "<br>";
                    });
                    
                    $("#divTip").html(strHTML);
                });
            });
            
            $("#Button2").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>";
                    });
                    
                    $("#divTip").html(strHTML);
                });
            });
        });
    </script>
  </head>
  
  <body>
        <div class="divFrame">
            <div class="divTitle">
                <input id="Button1" type="button" class="btn" value="獲取JSON數據" />
                <input id="Button2" type="button" class="btn" value="獲取XML數據" />
            </div>
            <div class="divContent">
                <div id="divTip"></div>
            </div>
        </div>
  </body>
</html>

UserInfo.jsoncss

[
    {
        "name": "呆呆",
        "sex": "男",
        "email": "daidai@163.com"
    },
    {
        "name": "獸獸",
        "sex": "男",
        "email": "ss@163.com"
    },
    {
        "name": "wisher",
        "sex": "男",
        "email": "wisher@163.com"
    }
]

UserInfo.xmlhtml

<?xml version="1.0" encoding="UTF-8"?>
<Info>
    <User id="1">
        <name>劉德華</name>
        <sex>男</sex>
    </User>
    
    <User id="2">
        <name>張曼玉</name>
        <sex>女</sex>
    </User>
    
    <User id="3">
        <name>周潤發</name>
        <sex>男</sex>
    </User>
</Info>