使用 jQuery 查找 XML 节点并放入现有的 HTML 表中

Question

我正在尝试从 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 还不够完善，无法发现它。我敢肯定，更有经验的人可以在一秒钟内找出问题所在。谁能告诉我我在这里做错了什么？非常感谢！

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

Answer 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);
        }
    });