• 0

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

أريد تمرير بعض القيم المسجلة داخل ملف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>")

  });
}

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يمكن استعمال دالة داخل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>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن