Carica il contenuto del file xml in div utilizzando jquery

Question

Come caricare il contenuto del file xml in un div.

Ecco il mio HTML in cui ho bisogno di caricare il contenuto XML

<div class="editorial" id="news-container"> 
</div> 

dati XML

<contentprogramming> 
    <category name = "My t" id = "1"> 
     <logo>http://123.png</logo>   
     <channel name="res" id= "1" type="ecommerce">    
      <logo>http://11.png</logo>   
      <items>    
       <item id="1"> 
        <image>http://11.jpg</image> 
        <title>Memory Card MSMT2G</title> 
        <details>$6.99</details> 
        <linkurl>http://www.test.com/Sony</linkurl> 
       </item> 
       <item id="2"> 
        <image>http://i2.jpg</image> 
        <title>Apple iPad </title> 
        <details>$579.95</details> 
        <linkurl>http://www.test.com/Apple</linkurl> 
       </item> 
      </items> 
     </channel> 
    </category> 
</contentprogramming> 

E il nome del file XML è something.xml

Ho provato diversi modi, ma didn' t work :(

Ho provato il metodo seguente ma non ho funzionato.

$('something.xml').find('name').each(function() { 
    $("#news-container").append($(this).text() + "<br />"); 
}); 

Answer 1

Prova questo:

// Load the xml file using ajax 
$.ajax({ 
    type: "GET", 
    url: "something.xml", 
    dataType: "xml", 
    success: function (xml) { 

     // Parse the xml file and get data 
     var xmlDoc = $.parseXML(xml), 
      $xml = $(xmlDoc); 
     $xml.find('category[name="My t"] logo').each(function() { 
      $("#news-container").append($(this).text() + "<br />"); 
     }); 
    } 
}); 

Riferimento: 1. jQuery.ajax() 2. parseXML()

Answer 2

È necessario sfuggire ai caratteri speciali HTML. Utilizzare questa funzione prima di impostare il testo in div.

function htmlSpecialChars(unsafe) { 
    return unsafe 
    .replace(/&/g, "&") 
    .replace(/</g, "&lt;") 
    .replace(/>/g, "&gt;") 
    .replace(/"/g, "&quot;"); 
} 

Answer 3

- è necessario chiamare file XML prima

$.ajax({ 
     url: '/something.xml', 
     type: "GET", 
     dataType: "xml", 
     success: function (result) { 
      $(result).find('name').each(function() { 
       $("#news-container").append($(this).text() + "<br />"); 
      } 
      } 
     }); 

Answer 4

Prova questo:

var xml='<contentprogramming><category name = "My t" id = "1"><logo>http://123.png</logo><channel name="res" id= "1" type="ecommerce"><logo>http://11.png</logo> <items><item id="1"><image>http://11.jpg</image><title>Memory Card MSMT2G</title><details>$6.99</details><linkurl>http://www.test.com/Sony</linkurl></item><item id="2"><image>http://i2.jpg</image><title>Apple iPad </title><details>$579.95</details><linkurl>http://www.test.com/Apple</linkurl></item> </items></channel></category></contentprogramming>'; 
xmlDoc = $.parseXML(xml), 
$xml = $(xmlDoc), 
$xml.find("category[name='My t'] logo").each(function() { 
    $("#news-container").append($(this).text() + "<br />"); 
} 

Answer 5

Se si dispone di un file locale che si desidera leggere come faccio io, è possibile effettuare le seguenti operazioni:

<input type="file" id="file" accept="text/xml"> 
<script type="text/javascript"> 
document.getElementById('file').addEventListener('change', function (evt) { 
    if (!evt.target.files){ 
     return; 
    } 

    var file = evt.target.files ? evt.target.files[0] : null, 
     reader = new FileReader(); 

    reader.onload = function (evt) { 
     console.log(evt.target.result); 
    }; 

    reader.readAsText(file); 
}); 
</script> 

Questo richiede all'utente di selezionare il file, ma lo fa arrivare il contenuto del file . Utilizza lo HTML5 FileReader API.