jQuery,Ajax获取xml数据

时间:2014-10-10 12:34:04

标签: jquery ajax xml

你好我需要从xml文件中获取数据,

这是html代码:

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
       var xml;
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "tt.xml",
                dataType: "xml",
                success: xmlParser
            });
        }); 
        function xmlParser(data) {
            xml = data;

            $('#load').fadeOut();

            $(xml).find("column").each(function()
            {

              var $col = $(this); 
              var name = $col.attr("name");
              $("#list").append("<li>"+ $col.text() + "</li>");

            });

        }
    </script>

</head>
<body >

<ul id="list"></ul>

</body>
</html>

这是我的xml文件的一个例子:

<?xml version="1.0" encoding="utf-8"?>

<pma_xml_export version="1.0" xmlns:pma="http://www.phpmyadmin.net/some_doc_url/">
    <!--
    - Structure schemas
-->
<pma:structure_schemas>
    <pma:database name="makes_data" collation="latin1_swedish_ci" charset="latin1">
        <pma:table name="Sept2014">
            CREATE TABLE `Sept2014` (
            `Year` int(4) DEFAULT NULL,
            `Make` varchar(13) DEFAULT NULL,
            `Model` varchar(32) DEFAULT NULL,
            `Trim` varchar(73) DEFAULT NULL,
            `Engine Size` varchar(17) DEFAULT NULL,
            `Engine Cylinder` varchar(17) DEFAULT NULL,
            `Engine Compressor Type` varchar(21) DEFAULT NULL,
            `Transmission` varchar(17) DEFAULT NULL
            ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
        </pma:table>
    </pma:database>
</pma:structure_schemas>

    <!--
    - Database: 'makes_data'
-->
<database name="makes_data">
    <!-- Table Sept2014 -->

    <table name="Sept2014">
        <column name="Year">2001</column>
        <column name="Make">Acura</column>
        <column name="Model">RL</column>
        <column name="Trim">3.5 4dr Sedan</column>
        <column name="Engine Size">3.5L</column>
        <column name="Engine Cylinder">6cyl</column>
        <column name="Engine Compressor Type">dd</column>
        <column name="Transmission">AUTOMATIC</column>
    </table>
    <table name="Sept20141">
        <column name="Year">2001</column>
        <column name="Make">bmw</column>
        <column name="Model">RL</column>
        <column name="Trim">3.5 4dr Sedan </column>
        <column name="Engine Size">3.5L</column>
        <column name="Engine Cylinder">6cyl</column>
        <column name="Engine Compressor Type">dd</column>
        <column name="Transmission">AUTOMATIC</column>
    </table>
    <table name="Sept20142">
        <column name="Year">2004</column>
        <column name="Make">Acura</column>
        <column name="Model">RL</column>
        <column name="Trim">3.5 4dr Sedan</column>
        <column name="Engine Size">3.5L</column>
        <column name="Engine Cylinder">6cyl</column>
        <column name="Engine Compressor Type">dd</column>
        <column name="Transmission">AUTOMATIC</column>
    </table>

    <table name="Sept2014">
            <column name="Year">2009</column>
            <column name="Make">Mercedes-Benz</column>
            <column name="Model">E-Class</column>
            <column name="Trim">E550 4MATIC 4dr Sedan AWD</column>
            <column name="Engine Size">5.5L </column>
            <column name="Engine Cylinder">8cyl</column>
            <column name="Engine Compressor Type">dd</column>
            <column name="Transmission">AUTOMATIC</column>
        </table>
        <table name="Sept2014">
            <column name="Year">2005</column>
            <column name="Make">Mercedes-Benz</column>
            <column name="Model">E-Class</column>
            <column name="Trim">E550 4dr Sedan</column>
            <column name="Engine Size">5.5L </column>
            <column name="Engine Cylinder">8cyl</column>
            <column name="Engine Compressor Type">cc</column>
            <column name="Transmission">AUTOMATIC</column>
        </table>
        <table name="Sept2014">
            <column name="Year">2001</column>
            <column name="Make">Mercedes-Benz</column>
            <column name="Model">E-Class</column>
            <column name="Trim">E550 4dr Sedan</column>
            <column name="Engine Size">5.5L </column>
            <column name="Engine Cylinder">8cyl</column>
            <column name="Engine Compressor Type">cc</column>
            <column name="Transmission">AUTOMATIC</column>
        </table>

</database>
</pma_xml_export>

它运作良好,但不像我需要更多解释我想获得所有列数据但基于其名称属性类别分开,例如,如果我选择2001年我将获得数据列名称= Make对应到今年,当我选择make = Acura时,我会得到模型和修剪对应于这个品牌。

例如: year = 2001 =&gt;使数据恢复= {Acura,宝马,梅赛德斯 - 奔驰}

如果我选择make = Acure =&gt;模型数据retreived = {RL}和Trim data retreived {3.5 4dr Sedan}

1 个答案:

答案 0 :(得分:0)

这将过滤您的对象,然后将它们放入一个数组中,但是我不清楚在按年检索数据后您想要对数据做什么:

function xmlParser(data) {
    $('#load').fadeOut();

    var property = 2001,
    propertyName = 'year',
    getProperty = 'Make';

    data = $.grep(data, function( obj, index ) {
      return obj[propertyName] == property;
    });

    var collection = [];
    $.each(data, function( index, obj ) {
        collection.push(obj[getProperty]);
    });
    console.log(collection);
}