اذهب إلى المحتوى
  • 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>")

  });
}

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...