Question

我正在构建一个双语词典应用程序。我还在努力找出如何：查询xml文件并获取第二语言（即柏柏尔语）中的等效单词。这是脚本：

$（文件）。就绪（函数（）{

$.ajax({
    type: "GET",
    url:"languages.xml",
    datatType: "xml",
    success: parseXml,
    failure: function(data){
        alert("XML file could not be found");
    }

});

我理解这是应用程序的逻辑所在。例如，当用户输入单词“Ant”并提交时，我们将从xml文件中获取berber等效的“tagettuft”。

function parseXml(xml){
    $("input").find("english").each(function(){
        var query =$(this).find("berber").text();
        $("#results").append(query);
    });
});

这是HTML：

<body>
<form name="search_form" id="searchForm" method="GET" action="search_results.html">
<label for="searchBox">Keyword Search</label>
<input type="text" id="searchBox" name="searchString">
<button name="searchKeyword" id="searchKeyword">Submit</button>

</form>

<div id="results">
</div>

这是XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<translations>
<translation>
    <english>Ant</english>
    <berber>Tagettuft</berber>
</translation>
</translations>

它似乎不起作用。对你的帮助表示感谢。提前谢谢。

Answer 1

function parseXml(xml){
    //  Primary: check data isn't empty
    if ($xml) {
        //  first I turn the xml data into a jQuery object to make it easier to search
        var $xml = $(xml);
        //  then I assign our wanted value to a variable
        //  I divided this into parts, simply to show you how you can reach this
        //
        //  however, if you will study jQuery Documentation,
        //      you'll find there are many different
        //      ways to get "inner elements"
        //      and their respective ".text" or ".html"
        var b = $xml.find('english').find('berber').text(), //  use a comma to continue assigning variables
            //  create an input to append to are target div,
            //  this is a traditional way to create a new element in jQuery
            //      simply add the attributes in an object after the string that
            //      determines the type of element you wish to make
            newInput = $('<input />', { readonly: 'readonly', type: 'text', value: b });
        //  add our new input, with it's result to our results area
        $('#results').append(newInput);
    }
};

jQuery API

尝试使用以下内容进行测试

<html>
    <head>
        <script type="text/javascript" src="js/jQuery.1.9.1.min.js" id="jQuery_JS"></script> <!--Your jquery link-->
        <script>
            function parseXml(xml) {
                if (xml) {
                    var $xml = $(xml);

                    console.log('XML:', $xml);
                    console.log(new Array(50).join('-'));

                    var sectionEnglish = $xml.find('english');

                    console.log('sectionEnglish:', sectionEnglish);
                    console.log(new Array(50).join('-'));

                    var subSectionBerber = sectionEnglish.find('berber');

                    console.log('subSectionBerber:', subSectionBerber);
                    console.log(new Array(50).join('-'));

                    var txtBerber = subSectionBerber.text();

                    console.log('txtBerber:', txtBerber);
                    console.log(new Array(50).join('-'));

                    var newElement = $('<div />', { text: txtBerber });

                    console.log('newElement:', newElement);
                    console.log(new Array(50).join('-'));

                    $('#results').append(newElement);

                    console.log('#results:', $('#results'));
                    console.log(new Array(50).join('-'));

                    console.log('TEST IS COMPLETE');
                }
            }
            $(function() {
                $('#searchForm').submit(function(e) {
                    e.preventDefault(); //  prevent form from normal submission
                    console.log('beging to submit form');
                    console.log(new Array(50).join('-'));

                    var ajaxOptions = {
                            type: "GET",
                            url:"languages.xml",
                            datatType: "xml",
                            success: parseXml,
                            failure: function(data){
                                alert("XML file could not be found");
                            }
                        };

                    console.log('ajaxOptions:', ajaxOptions);
                    console.log(new Array(50).join('-'));

                    $.ajax(ajaxOptions);
                })
            })
        </script>
    </head>
    <body>
        <form name="search_form" id="searchForm" method="GET" action="search_results.html">
            <label for="searchBox">Keyword Search</label>
            <input type="text" id="searchBox" name="searchString">
            <button name="searchKeyword" id="searchKeyword">Submit</button>
        </form>
        <div id="results"></div>
    </body>
</html>

如何从xml文件中查询双语词典中的数据

1 个答案: