كيف أجلب بيانات من ملف xml وأظهرها داخل html؟

محمد بوسكوري · 1 فبراير 2016

أريد تمرير بعض القيم المسجلة داخل ملفxml، وإظهارها داخل وسوم div على ملف html، هكذا:

ملف HTML:

<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file1.xml">
</div>
<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file2.xml">
</div>

دالةJavaScript المسؤولة عن تصفح ملف xml، وإدراج القيم داخل كود html:

$(".data").each(function() {
  // store element instance 
  var elem = $(this);
  var path = $(this).attr("data-xml");

  $.ajax({
    url: path,
    dataType: "xml",
    success: function(xml) {
      parse(document, elem);
    },
    error: function() {
      alert("Error!");
    }
  });

});

function parse(document, elem) {
  console.log($(document).find("name").text());

  $(document).find("person").each(function() {
    var $person = $(this);
    elem.append(
      "<div class='name'>Name: " +
      $person.find("name").text() +
      "</div><div class='title'>Title: " +
      $person.find("title").text() + "</div>")

  });
}

لكن البيانات لا تظهر، فما الحل؟

E.Nourddine · 3 فبراير 2016

يمكن استعمال دالة داخلJavascript للحصول على محتوى ملفXml:

success: function(xml) {
  parse(document, elem);
}

مثال متكامل:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    myFunction(xhttp);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

كما يمكن استعمال قيم ملفxml وإدراجها داخل جدول على صفحة html بالطريقة التالية:

<!DOCTYPE html>
<html>
    <body>

        <script>
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            xmlhttp.onload = function() {
                var xmlDoc = new DOMParser().parseFromString(xmlhttp.responseText,'text/xml');

                console.log(xmlDoc);

                document.write("<table border='1'>");
                var x=xmlDoc.getElementsByTagName("CD");
                for (i=0;i<x.length;i++)
                { 
                    document.write("<tr><td>");
                    document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
                    document.write("</td><td>");
                    document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                }
                document.write("</table>");

            }


            xmlhttp.open("GET","social.xml",false);
            xmlhttp.send();
            </script>

    </body>
</html>

كيف أجلب بيانات من ملف xml وأظهرها داخل html؟

السؤال

محمد بوسكوري

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية