使用ajax jquery从xml和json中读取

Question

我正在尝试从xml和json文件中读取数据，这些文件与它们称为show.xml和followers.json的html位于同一文件夹中，然后通过唱出它们的id将数据发布到现有的div标签中，第一个函数希望它在该文档被读取，另一个在单击时使其没有输出，仅打印html

这是我的HTML

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Shaden
            </title>
        </head>
        <body>
            <div id="content_area" >
            <div class="profile_imge">

            </div>
            <div id="name">

            </div>
            <br/>
            <div id="bio">

            </div>
            <p id="click_here">Click here to view my twitter followers</p>
            <div id="followers">

            </div>
            </div>
        </body>
        <style>
            @font-face {
    font-family: my_font;
    src: url('channel.ttf');
}
            .profile_imge img {
               -moz-box-shadow: 5px 5px 7px #888;
               -moz-border-radius: 15px;
               -webkit-box-shadow: 5px 5px 7px #888;
               -webkit-border-radius: 15px;
               shadow: 5px 5px 7px #888;
               border-radius:15px;
               border: solid;
               border-color: #DCDCDC;
            }
            #name{
                font-family: my_font; src: url('channel.ttf');
                font-size: x-large;
            }
            #followers img{
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius:15px;
            }
            #content_area {
                width: 700px ;
                margin-left: auto ;
                margin-right: auto ;
                text-align: center;
            }

        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                   url: "show.xml",
                   dataType: "xml",
                   success: function(xml) {
                              var name = $(this).find('name').text();
                              var bio = $(this).find('description').text();
                              var imge_url = $(this).find('profile_image_url').text();
                              $(".profile_imge div").append(imge_url);
                              $("#name").append(name);
                              $("#bio").append(bio);
                       }
            }) ;
            });
                $("#click_here").click(function() {
                    $.ajax({
                   url: "followers.json",
                   dataType: "json",
                   success: function(json) {
                              json.id.each(function(){
                             var imge_url = $(this).find('profile_image_url').text();
                              $("#followers").append(imge_url);}) ;
                       }
            }) ;
                });
        </script>

    </html>

这是XML

<?xml version="1.0" encoding="UTF-8"?>
<user>
  <id>122890543</id>
  <name>Shaden Al Omran</name>
  <screen_name>shadoon91</screen_name>
  <location>KSA , Riyadh</location>
  <profile_image_url>http://a0.twimg.com/profile_images/2626407130/image_normal.jpg</profile_image_url>
  <profile_image_url_https>https://si0.twimg.com/profile_images/2626407130/image_normal.jpg</profile_image_url_https>
  <url>http://shadoon91.blog.com</url>
  <description>Saudi girl,IT student in KSU,Microsoft Student Partner,programing and architecture r the most 2 interesting things4 me =]..i write everything comes 2 my mind :)</description>
  <protected>false</protected>
  <followers_count>76</followers_count>
  <profile_background_color>C0DEED</profile_background_color>
  <profile_text_color>333333</profile_text_color>
  <profile_link_color>0084B4</profile_link_color>
  <profile_sidebar_fill_color>DDEEF6</profile_sidebar_fill_color>
  <profile_sidebar_border_color>C0DEED</profile_sidebar_border_color>
  <friends_count>60</friends_count>
  <created_at>Sun Mar 14 07:28:05 +0000 2010</created_at>
  <favourites_count>1</favourites_count>
  <utc_offset>10800</utc_offset>
  <time_zone>Riyadh</time_zone>
  <profile_background_image_url>http://a0.twimg.com/images/themes/theme1/bg.png</profile_background_image_url>
  <profile_background_image_url_https>https://si0.twimg.com/images/themes/theme1/bg.png</profile_background_image_url_https>
  <profile_background_tile>false</profile_background_tile>
  <profile_use_background_image>true</profile_use_background_image>
  <geo_enabled>true</geo_enabled>
  <verified>false</verified>
  <statuses_count>6941</statuses_count>
  <lang>en</lang>
  <contributors_enabled>false</contributors_enabled>
  <is_translator>false</is_translator>
  <listed_count>1</listed_count>
  <default_profile>true</default_profile>
  <default_profile_image>false</default_profile_image>
  <following></following>
  <follow_request_sent></follow_request_sent>
  <notifications></notifications>
</user>

这是json（太大） http://430201246.it341.com/MS2/fallowers.json

Answer 1

JSON的问题在于您无法对json使用“ find”之类的方法。 您需要将其更改为以下内容：

$("#click_here").click(function() {
                    $.ajax({
                   url: "followers.json",
                   dataType: "json",
                   success: function(json) {
                             json.id.each(function() { 
                               var imge_url = $(this).find('profile_image_url').text();
                               $("followers").append(imge_url);})
                             });
                       }
            }).

对于XML，您是如此的痛苦！

$.ajax({
                   url: "show.xml",
                   dataType: "xml",
                   success: function(xml) {
                              var name = $(xml).find('name').text();
                              var bio = $(xml).find('description').text();
                              var imge_url = $(xml).find('profile_image_url').text();
                              $("profile_imge").append(imge_url);
                              $("name").append(name);
                              $("bio").append(bio);
                       }