如何向用户显示 json feed？

Posted 2023-03-15

【中文标题】如何向用户显示 json feed？

【英文标题】：How to display json feed to user?

【发布时间】：2011-09-02 18:24:21

【问题描述】：

我有一个有效的 json 提要，我通过使用 jquery 访问 php 文件从服务器中提取该提要。查询 php 文件返回的 json 提要的示例是

"items":["acc_number":"11111","acc_name":"TestAccount","demographics":["Some
Street","SomeState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null,    "acc_number":"22222","acc_name":"MyAccount","demographics":"MyStreet","MyState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null],"total_items":"80","md5sum":"c7a834d45bdf348abfdcdb95994c7608"

我正在使用下面的代码，虽然我会通过提要并删除所有不为 NULL 的记录和字段。但我什么也得不到。

$.ajax(
   type= 'GET',
   url: 'http://MyURL.com',
   dataType: 'json',
   username: myusername,
   password: mypassword,
   success: function(data) 
        var items = [];
        $.each(data, function(key,val) 
        items.push('<li id="' = key = '">' + val + '</li>');
);

$('<ul/>', 
   'class': 'my-new-list',
    html: items.join('')
    ).appendTo('body');
 
);

一如既往地感谢任何帮助/提示。

谢谢！

根据以下答案更新。

$(document).ready(function() 
  testNews();
);

function testNews() 
$('body').append('<h1>News</h1>');
$('body').append('<h2>Main Display</h2>');
$('body').append("<div id='success_news_main' class='waiting'>Waiting for response</div>");

$.ajax( 
type: "GET",    
url: 'http://MyURL.com/news.php', 
dataType: 'json',
username: myusername, 
password: mypassword,
success: function(data) 
    var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
    $.each(data.items, function(k,v) 
    $('<li/>').attr('id', k).html(v).appendTo(ul);
);

);

【参考方案1】：

尝试迭代 data.items 而不是 data，因为这是您的集合：

success: function(data) 
    var items = [];
    $.each(data.items, function(key, val) 
        items.push('<li id="' + key + '">' + val + '</li>');
    );

    ...

您的items.push 方法似乎也被多个= 字符破坏了。你的意思可能是+。

另外一点是$.each 语句中的val 变量。这将是一个对象。你可能想从这个对象中选择一个特定的属性，比如：

items.push('<li id="' + key + '">' + val.acc_number + '</li>');

而键将是数组的索引。而且因为 HTML 中的 id 不能以数字开头，如果你想拥有有效的 HTML，你可能需要在你的 li id 前面加上前缀：

items.push('<li id="item_' + key + '">' + val.acc_number + '</li>');

【讨论】：

感谢您提供详细和快速的答复。我根据您上面的建议和下面的其他建议更新了我的代码，但仍然根据我的问题更新的代码收到等待响应消息。我也在 phonegap 和 jquery mobile 上使用它，所以不确定这是否会有所不同。

我在 dataType 之后放了 error: alert('FAILED')，我在 FireFox 和 ios 模拟器中都收到了失败的消息。所以看起来 URL 可能是问题所在。

@Deon，你怎么可能在 dataType 之后放一个警报？您可以在 $.ajax 调用之前/之后或在成功回调中放置它。我还注意到您使用的是绝对网址：http://MyURL.com。确保您没有违反禁止您向不同域发送 AJAX 请求的同源策略限制。确保这一点的最佳方法是使用相对 URL，例如：url: '/myscript'。

我做错了吗？有没有另一种方法来查询这个 php 文件并获取 json 提要？当我在浏览器中使用 URL 时，我可以输入用户/密码，json 提要显示在正文中。它可能是跨域的，但我也从同一服务器提取 xml 提要，这没有问题。感谢你的帮助。我将继续尝试排除故障并使用 console.log 来查看它在哪里停止。

@Deon，您尝试使用 AJAX 访问的 url 是否与服务器包含此 javascript 的页面的域托管在同一域上？

【参考方案2】：

在形成要显示的 html 标记时，不应使用字符串连接。而是使用 jQuery 的函数创建 dom 元素，向它们添加属性值并将它们添加到页面中。

以下是修改代码的建议：

$.ajax( 
   type= 'GET', 
   url: 'http://MyURL.com', 
   dataType: 'json', 
   username: myusername, 
   password: mypassword, 
   success: function(data)  
        var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
        $.each(data.items, function(k,v) 
            $('<li/>').attr('id', k).html(v).appendTo(ul);
        );
    
);

这也更容易阅读，并且不会遍历数组两次。

此外，“$.each”中的“v”变量将是 json 中数组的对象。您需要访问它们各自的属性并在 li 中创建必要的 html/元素，而不是直接将其设置为 html 属性。

【讨论】：

感谢您的回答和帮助。您上面的解决方案效果很好。我正在获取正确数量的项目列表，其中仅显示项目符号点。您上面关于访问单个属性的评论是否有您可以指向我阅读或举例的资源。我假设这就是为什么不显示这些值的原因。谢谢！

【参考方案3】：

遍历data.items，因为 JSON 返回该数组中的值。此代码示例还修复了“=”应该是“+”的位置。

$.ajax(
   type= 'GET',
   url: 'http://MyURL.com',
   dataType: 'json',
   username: myusername,
   password: mypassword,
   success: function(data) 
        var items = [];
        $.each(data, function(key,val) 
            items.push('<li id="' + key + '">' + val + '</li>');
        );  


        $('<ul/>', 
            'class': 'my-new-list',
            html: items.join('')
            ).appendTo('body');
   );  
);