使用 jQuery 查找 XML 节点并放入现有的 HTML 表中
Posted
技术标签:
【中文标题】使用 jQuery 查找 XML 节点并放入现有的 HTML 表中【英文标题】:Finding XML nodes with jQuery and putting into existing HTML table 【发布时间】:2017-10-01 12:53:24 【问题描述】:我正在尝试从 XML 提要中提取一些股票信息并将其写入我网站上的一些现有 div。
更新:由于CORS,我现在正在使用 php 代理。请参阅下面的代码。
更新 2: 好的,到了。下面我更新的 jQuery 适用于第一个 stockPrice
变量,但不适用于其余三个。为所有这些提取的数据都是数字,所以我不确定为什么只有一个可以工作。
这是我的 html:
<div class="sidenavwrap">
<div class="sidenavhd"><p class="stocktitle">XXXX (Common Stock)</div>
<div class="ctcol3"><p class="stocklft">Exchange</p></div>
<div class="ctcol4"><p class="stocklft">NASDAQ (US Dollar)</p></div>
<div id="stock-divider"></div>
<div class="ctcol3"><p class="stocklft">Price</p></div>
<div class="ctcol4"><p class="stocklft" id="stockPrice"></p></div>
<div id="stock-divider"></div>
<div class="ctcol3"><p class="stocklft">Change (%)</p></div>
<div class="ctcol4"><p class="stockpriceneg" id="changePercent"></p></div>
<div id="stock-divider"></div>
<div class="ctcol3"><p class="stocklft">Volume</p></div>
<div class="ctcol4"><p class="stocklft" id="stockVolume"></p></div>
<div id="stock-divider"></div>
<p style="text-align: center;">Minimum 10 minute delay</p>
<div id="stock-divider"></div>
<br><br><br>
<!-- end sidenavwrap --></div>
这是我的 proxy.php:
// Set return content type
header('Content-type: application/xml');
// Website url to open
$url = 'http://xml.corporate-ir.net/irxmlclient.asp?compid=XXXXXX&reqtype=quotes';
// Get the content
$handle = fopen($url, "r");
// If there is something, read and return
if ($handle)
while (!feof($handle))
$buffer = fgets($handle, 4096);
echo $buffer;
fclose($handle);
这是我通过代理提取数据的 jQuery:
<script>
$(document).ready(function()
$.get("includes/proxy.php", function (data)
// Some callback functions
var stockPrice = ($(data).find('Trade').text());
var changeValue = ($(data).find('Change').text());
var stockVolume = ($(data).find('Volume').text());
var changePercentLong = (changeValue / (stockPrice - changeValue)) * 100;
var changePercent = changePercentLong.toFixed(2);
$('#stockPrice').html('$' + stockPrice);
$('#changePercent').html(changeValue + ' (' + changePercent + '%)');
$('#stockVolume').html(stockVolume);
if (changeValue >= 0)
$('#changePercent').removeClass('stockpriceneg').addClass('stockprice');
else
$('#changePercent').removeClass('stockprice').addClass('stockpriceneg');
);
);
</script>
更新 2: 控制台中仍然没有出现任何错误,现在我的第一个变量显示正确,但其他变量只显示 0
's(它们应该是 -0.23
,前一个变量的一些数学运算,分别是5039270
):
我认为这实际上只是我的 jQuery 中的一个语法错误,但我的 JS/jQuery 还不够完善,无法发现它。我敢肯定,更有经验的人可以在一秒钟内找出问题所在。谁能告诉我我在这里做错了什么?非常感谢!
【问题讨论】:
尝试使用 $.parseXML() 抱歉,我的 jquery 会放在哪里? var dataobj = $.parseXML(xml);请通过以下链接api.jquery.com/jQuery.parseXML希望对您有所帮助。 我认为这不是我需要的。我已经在提取 XML 文档了。为什么我需要将其解析为字符串并将其转回 XML 文档? 你能创造小提琴吗?我尝试创建相同但无法访问 ajax 调用。 【参考方案1】:这是最终与我在原始问题中发布的 PHP 代理一起工作的 jQuery:
<script>
$(document).ready(function()
$.get("includes/proxy.php", function (data)
// Some callback functions
var stockPrice = ($(data).find('Trade').text());
var changeValue = ($(data).find('Change').text());
var stockVolume = ($(data).find('Volume').text());
var changePercentLong = (changeValue / (stockPrice - changeValue)) * 100;
var changePercent = changePercentLong.toFixed(2);
$('#stockPrice').html('$' + stockPrice);
$('#changePercent').html(changeValue + ' (' + changePercent + '%)');
$('#stockVolume').html(stockVolume);
if (changeValue >= 0)
$('#changePercent').removeClass('stockpriceneg').addClass('stockprice');
else
$('#changePercent').removeClass('stockprice').addClass('stockpriceneg');
);
);
</script>
【讨论】:
【参考方案2】:请用以下代码替换您的代码。希望对您有所帮助。
$.ajax(
type: "GET",
url: "http://xml.corporate-ir.net/irxmlclient.asp?compid=XXXXXX&reqtype=quotes",
dataType: "xml",
complete: function (xml)
var xmlDoc = (new DOMParser()).parseFromString(xml.responseText, "application/xml")
var nodes = xmlDoc.querySelectorAll('IRXML StockQuotes Stock_Quote')[0];
var stockPrice = parseInt(nodes.querySelectorAll('Trade')[0].textContent);
var changeValue = parseInt(nodes.querySelectorAll('Change')[0].textContent); // $(this).find('Change').text();
var changePercent = (changeValue / (stockPrice - changeValue)) * 100;
var stockVolume = nodes.querySelectorAll('Volume')[0].textContent; //$(this).find('Volume').text();
$('#stockPrice').html('$' + stockPrice);
$('#changePercent').html('+' + changeValue + ' (' + changePercent + '%)');
$('#stockVolume').html(stockVolume);
,
error: function (errorData)
console.log('Error: request failed!');
console.log(errorData);
);
【讨论】:
这适用于我服务器上的静态test.xml
文件,但不适用于您示例中的 url(以及正确的 compid
)。有什么想法可能导致它失败吗?
实际上我下载了相同的文件进行测试,因为我也无法访问该 URL。
是的,很遗憾我需要它来处理该提要。以上是关于使用 jQuery 查找 XML 节点并放入现有的 HTML 表中的主要内容,如果未能解决你的问题,请参考以下文章