使用$ .ajax函数从XML文件中获取数据

时间:2013-02-27 09:26:54

标签: jquery ajax

朋友您好我是jQuery的新手,并尝试开发一个Ajax函数,帮助我从XML文件中获取数据到我的html文件以下是我的代码

HTML

<div id="myDiv"></div> <button>Get info</button>

XML 更新*

    <?xml version="1.0" encoding="utf-8"?>
<main><person>
    <name>Bhupesh</name>
    <last>Lohani</last>
</person>
<person>
<name>Kamal</name>
<last>Sandhu</last>
</person>

<person>
<name>Ravi</name>
<last>Kumar</last>
</person></main>

SCRIPT 更新*

    $(document).ready(function(e) {
   $("button").click(function(){
               var htmlStr = '';
               $.ajax({
                       type:'get',
                       url:"xml.xml",
                       cache: false,
                       dataType: "xml",
                       success:function(result){                          
                               var main = $(result).find('main');
                               $(main).each(function( index ) {
                                   var person = $(this).find('person')
                                       var name = $(person).find('name').text();
                                       var lastName = $(person).find('last').text();
                                       //console.log(name + ' | ' + lastName);
                                       htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>';
                               });
                               $("#myDiv").append(htmlStr);
                       }});
       });
});

当我点击我的按钮时它没有显示任何内容请帮助我们

更新

朋友我在我的代码中做了一些修改,现在就像

那样
BhupeshKamalRavi - LohaniSandhuKumar

我希望每个姓名和名字都显示为

Bhupesh - Lohani
Kamal - Snadhu
Ravi - Kumar

请帮帮我朋友

提前致谢.. :))

1 个答案:

答案 0 :(得分:1)

检查htmlStr变量的范围。它只在每个回调方法中。您需要在每个回调范围之外定义它。可以在主变量下定义它。

var main= ... ;
var htmlStr = ''; 

根据您的更新请求。我看到你并没有在人身上进行迭代,你只是在迭代'main'。 $(main).find('person')将导致将两个person元素分配给'person'变量。随后,$(person).find('name')导致从两个人元素中获取名字。

你可以通过迭代人来快速解决这个问题。

        var main = $(result).find('main');
        var htmlStr = '';

        $('person', main).each(function (index) {
            var person = $(this);
            var name = $(person).find('name').text();
            var lastName = $(person).find('last').text();
            console.log(name + ' | ' + lastName);
            htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>';
        });
        $("#myDiv").append(htmlStr);