javascript jQuery 读取 XML URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21508343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery read XML URL
提问by user3237099
My below code working well but i need to import XML data from xml URL not from HTML file like this if i need to retrieve image from XML how i can do that.
我下面的代码运行良好，但我需要从 xml URL 导入 XML 数据，而不是像这样的 HTML 文件，如果我需要从 XML 检索图像，我该怎么做。
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"
$(document).ready(function(){
//$('#table').append('<h2>SHOWS</h2>');
$('#table').append('<table id="show_table">');
$(xml).find('show').each(function(){
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append(html);
});
//alert($('#show_table').html());
})
all what i need is change this var xml = "9/8 ... " to let the JQuery code read from the ONLINE URL
我所需要的只是更改此 var xml = "9/8 ... " 以让 JQuery 代码从 ONLINE URL 读取
回答by Nataliia Kropachova
If you need to load XML data from the URL, you need to execute AJAX request, it may be something like this:
如果需要从 URL 加载 XML 数据，则需要执行 AJAX 请求，可能是这样的：
$(function() {
$.ajax({
type: "get",
url: "http://yoursite.com/yourfile.xml",
dataType: "xml",
success: function(data) {
/* handle data here */
$("#show_table").html(data);
},
error: function(xhr, status) {
/* handle error here */
$("#show_table").html(status);
}
});
});
Keep in mind, if you use AJAX you can place .xml file on the same domain name. In other case you need to set up cross-origin resource sharing(CORS).
请记住，如果您使用 AJAX，您可以将 .xml 文件放在同一个域名上。在其他情况下，您需要设置cross-origin resource sharing（CORS）。
EDITED:
编辑：
I modified your code, now it appends tdelement to your table. But xml is still inside html.
我修改了您的代码，现在它将td元素附加到您的表格中。但是 xml 仍然在 html 中。
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"
$(function() {
$(xml).find('show').each(function() {
console.log(this);
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append($(html));
});
});
But you need to modify your html file, check my solution here: http://jsfiddle.net/a4m73/
但是你需要修改你的 html 文件，在这里查看我的解决方案：http: //jsfiddle.net/a4m73/
EDITED: full solution with loading xml from URL
已编辑：从 URL 加载 xml 的完整解决方案
I combined two parts described above, check here: http://jsfiddle.net/a4m73/1/
我结合了上面描述的两个部分，在这里查看：http: //jsfiddle.net/a4m73/1/
回答by Mehran Hatami
Use jquery-xpath, then you can easily do what you want like:
使用jquery-xpath，然后你可以轻松地做你想做的事：
$(xml).xpath("//shows/show");
if you want know more about xpath just take a look on XML Path Language (XPath)document.
如果您想了解有关 xpath 的更多信息，请查看XML 路径语言 (XPath)文档。
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>";
$(document).ready(function () {
//$('#table').append('<h2>SHOWS</h2>');
$('#table').append('<table id="show_table">');
$(xml).xpath("//shows/show").each(function () {
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append(html);
});
})
