Question

我是JQuery / Ajax的新手;这真的只是我的第二个项目，也是我的第一个帖子。我在这里看了很多，我只是没有想出答案。下面的语法格式类似于我在Wunderground API中成功使用的格式。我认为这将遵循类似的解决方案。我这次呼唤The Guardian Public API。我可以告诉数据正在返回，因为当我将#newsitem添加到我的html doc时，我看到我的标签文章，URL和日期的十次迭代，但我的DIV中没有显示任何内容。当我在浏览器工具中检查时，我也可以看到内容。

我确定我正在搜索结果数组不正确或我的语法不正确。我没有发布HTML，但是，是的，我加载了JQuery模块。

感谢任何帮助。对不起，如果这是转发 - 我已经查看了侧边栏中的每个“类似问题”链接;希望这很容易。

        $.ajax({
        url: 'http://content.guardianapis.com/search?section=us-news&api-key=xxxxx&format=xml',
        dataType: 'xml',
        success: function(mynews){
        $(mynews).find('response results result').each(function() {
            var strTitle = $(this).find('web-title').text();
            var strUrl = $(this).find('web-url').text();
            var strPubdate = $(this).find('web-publication-date').text();

            $('#newsitem ul').append(
                $('<li />', {
                    text: 'Article: ' + strTitle
                })
            );
            $('#newsitem ul').append(
                $('<li />', {
                    text: 'URL: ' + strUrl
                })
            );          
            $('#newsitem ul').append(
                $('<li />', {
                    text: 'Date: ' + strPubdate
                })
            );
        });

    },
    error: function() {
      $(".newsitem").html('<p>Error: ' + error + '</p>');
    }
});

显示页面：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guardian News</title>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> 
        <script src="guardiannews.js"></script>
<style type="text/css">     
        .newsitem li{
            font-family:  Verdana, sans-serif;
            font-size: small;
        }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Guardian News</td>
  </tr>
  <tr>
    <td><div id="newsitem"><ul><!-- News Content--></ul></div></td>
  </tr>
</table>
</body>
</html>

以下是API的一些示例输出。

<response status="ok" user-tier="developer" total="30070" current-page="1" pages="15035" start-index="1" page-size="2" order-by="newest">
<results>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" type="article" section-id="us-news" web-title="FBI to investigate if Orlando gunman's sexuality was a motive in shooting" api-url="https://content.guardianapis.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" section-name="US news" web-publication-date="2016-06-14T19:23:16Z" id="us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub"/>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" type="article" section-id="us-news" web-title="Fact-checking Donald Trump's speech in the wake of the Orlando terror attack" api-url="https://content.guardianapis.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" section-name="US news" web-publication-date="2016-06-14T19:19:17Z" id="us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check"/>
</results>
</response>

Answer 1

看了API in question之后，你所追求的值只是元素节点的属性。

您可以使用attr()直接访问这些属性，而不是使用find()，如下所示：

var strTitle = $(this).attr('web-title'),
    strUrl = $(this).attr('web-url'),
    strPubdate = $(this).attr('web-publication-date');

这是fiddle。

Answer 2

以下是一些建议。

如果strTitle，strUrl和strPubdate具有正确的值，请尝试以不同的方式将它们附加到列表中，例如：

$("#newsitem ul").append($("<li>").text('Article: ' + strTitle));

根据你的HTML，newsitem是div的id，所以应该总是在jQuery选择器中用作#newsitem。但是，在您的css和错误处理程序中，您正在使用＆＃34; .newsitem＆＃34;假设newsitem是一个类名而不是id。

JQuery AJAX内容不显示

2 个答案: