The method by which jQuery reads the contents of the XML file

  • 2020-05-12 02:10:01
  • OfStack

This example shows how jQuery can read the contents of XML files. Share with you for your reference. The specific implementation method is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery read XML file </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1{color:Green;text-align:center;}
        body{ background-color:#EEEEEE ; font-family: Microsoft jas black ; }
        #showresult{width:600px;overflow:hidden;}
    </style>
    <script type="text/javascript" src="jquery/1.4.4/jquery.min.js"></script>  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#read").click(function () {
                $.ajax({
                    // Request mode: get
                    type: "GET",
                    //xml File location
                    url: "sitemap.xml",
                    // The returned data format is xml
                    dataType: "xml",
                    // Request the method to execute after successful completion
                    success: function (xml) {
                        $(xml).find("url").each(function (i) {
                            //i from 0 Start, add, and if you want to display all the data, remove the judgment
                            if (i < 10) {
                                // The link address
                                var location = $(this).find("loc").text();
                                // According to the text
                                var text = $(this).find("loc").text();
                                // Dynamic loading method : The link address
                                $("<a>").attr("href", location)
                                // According to the text
                            .text(text)
                                // Set the style
                            .css({ "width": "700px", "float": "left", "margin-bottom": "5px" })
                                // Loaded into the div
                            .appendTo("#showresult");
                            }
                        })
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="showresult">
        <h1>jQuery read XML file </h1>
        <a id="read" href="#" style="width:700px;"> Click read XML</a>
    </div>
</body>
</html>

I hope this article is helpful for you to design jQuery program.


Related articles: