jQuery AJAX 實例6 介紹了如何使用jQuery AJAX加載XML文件,并將其呈現在頁面上。
以下是示例的HTML代碼:
<!-- HTML結構 --> <div id="xmlContent"></div>
接下來是jQuery代碼:
$(document).ready(function(){ // 加載XML文件 $.ajax({ type: "GET", url: "example.xml", dataType: "xml", success: function(xml){ // 解析XML文件并生成HTML var content = "<ul>"; $(xml).find('book').each(function(){ var title = $(this).find('title').text(); var author = $(this).find('author').text(); var year = $(this).find('year').text(); content += "<li>" + title + " by " + author + " (published in " + year + ")</li>"; }); content += "</ul>"; // 將HTML添加到頁面中 $('#xmlContent').html(content); }, error: function(){ alert("無法加載XML文件。"); } }); });
在這個示例中,我們使用了jQuery的AJAX功能來加載XML文件,并使用jQuery的DOM操作功能將解析的數據生成HTML,并將其添加到頁面上。如果加載XML文件失敗,將觸發錯誤,我們將使用彈出對話框進行通知。