javascript - jQuery:从 json 读取数据？

Question

我正在尝试在我的 html 页面上获取并显示数据(twitter feed)。

我有连接到 Twitter API 并创建此输出的 PHP 页面:

[{
    "created_at": "Sun Apr 09 17:56:20 +0000 2017",
    "id": 851131679167139842,
    "id_str": "851131679167139842",
    "text": "hello world with an image goes here as a test! https:\/\/t.co\/jNfdESxPcn",
    "truncated": false,
    "entities": {
        "hashtags": [],
        "symbols": [],
        "user_mentions": [],
        "urls": [],
        "media": [{
            "id": 851131665623732225,
            "id_str": "851131665623732225",
            "indices": [47, 70],
            "media_url": "http:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg",
            "media_url_https": "https:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg",
            "url": "https:\/\/t.co\/jNfdESxPcn",
            "display_url": "pic.twitter.com\/jNfdESxPcn",
            "expanded_url": "https:\/\/twitter.com\/DavidHoperz\/status\/851131679167139842\/photo\/1",
            "type": "photo",
            "sizes": {
                "thumb": {
                    "w": 150,
                    "h": 150,
                    "resize": "crop"
                },
                "large": {
                    "w": 670,
                    "h": 728,
                    "resize": "fit"
                },
                "small": {
                    "w": 626,
                    "h": 680,
                    "resize": "fit"
                },
                "medium": {
                    "w": 670,
                    "h": 728,
                    "resize": "fit"
                }
            }
        }]
    },
    "extended_entities": {
        "media": [{
            "id": 851131665623732225,
            "id_str": "851131665623732225",
            "indices": [47, 70],
            "media_url": "http:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg",
            "media_url_https": "https:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg",
            "url": "https:\/\/t.co\/jNfdESxPcn",
            "display_url": "pic.twitter.com\/jNfdESxPcn",
            "expanded_url": "https:\/\/twitter.com\/DavidHoperz\/status\/851131679167139842\/photo\/1",
            "type": "photo",
            "sizes": {
                "thumb": {
                    "w": 150,
                    "h": 150,
                    "resize": "crop"
                },
                "large": {
                    "w": 670,
                    "h": 728,
                    "resize": "fit"
                },
                "small": {
                    "w": 626,
                    "h": 680,
                    "resize": "fit"
                },
                "medium": {
                    "w": 670,
                    "h": 728,
                    "resize": "fit"
                }
            }
        }]
    },
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e",
    "in_reply_to_status_id": null,
    "in_reply_to_status_id_str": null,
    "in_reply_to_user_id": null,
    "in_reply_to_user_id_str": null,
    "in_reply_to_screen_name": null,
    "user": {
        "id": 851119985732800513,
        "id_str": "851119985732800513",
        "name": "David",
        "screen_name": "DavidHoperz",
        "location": "",
        "description": "",
        "url": null,
        "entities": {
            "description": {
                "urls": []
            }
        },
        "protected": false,
        "followers_count": 0,
        "friends_count": 21,
        "listed_count": 0,
        "created_at": "Sun Apr 09 17:09:52 +0000 2017",
        "favourites_count": 0,
        "utc_offset": null,
        "time_zone": null,
        "geo_enabled": false,
        "verified": false,
        "statuses_count": 3,
        "lang": "en",
        "contributors_enabled": false,
        "is_translator": false,
        "is_translation_enabled": false,
        "profile_background_color": "F5F8FA",
        "profile_background_image_url": null,
        "profile_background_image_url_https": null,
        "profile_background_tile": false,
        "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_link_color": "1DA1F2",
        "profile_sidebar_border_color": "C0DEED",
        "profile_sidebar_fill_color": "DDEEF6",
        "profile_text_color": "333333",
        "profile_use_background_image": true,
        "has_extended_profile": false,
        "default_profile": true,
        "default_profile_image": false,
        "following": false,
        "follow_request_sent": false,
        "notifications": false,
        "translator_type": "none"
    },
    "geo": null,
    "coordinates": null,
    "place": null,
    "contributors": null,
    "is_quote_status": false,
    "retweet_count": 0,
    "favorite_count": 0,
    "favorited": false,
    "retweeted": false,
    "possibly_sensitive": false,
    "lang": "en"
}, {
    "created_at": "Sun Apr 09 17:47:36 +0000 2017",
    "id": 851129482832470026,
    "id_str": "851129482832470026",
    "text": "How to display twitter posts using javascript https:\/\/t.co\/I49vjVbAUJ",
    "truncated": false,
    "entities": {
        "hashtags": [],
        "symbols": [],
        "user_mentions": [],
        "urls": [{
            "url": "https:\/\/t.co\/I49vjVbAUJ",
            "expanded_url": "https:\/\/www.script-tutorials.com\/how-to-display-twitter-posts-using-javascript\/",
            "display_url": "script-tutorials.com\/how-to-display\u2026",
            "indices": [46, 69]
        }]
    },
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e",
    "in_reply_to_status_id": null,
    "in_reply_to_status_id_str": null,
    "in_reply_to_user_id": null,
    "in_reply_to_user_id_str": null,
    "in_reply_to_screen_name": null,
    "user": {
        "id": 851119985732800513,
        "id_str": "851119985732800513",
        "name": "David",
        "screen_name": "DavidHoperz",
        "location": "",
        "description": "",
        "url": null,
        "entities": {
            "description": {
                "urls": []
            }
        },
        "protected": false,
        "followers_count": 0,
        "friends_count": 21,
        "listed_count": 0,
        "created_at": "Sun Apr 09 17:09:52 +0000 2017",
        "favourites_count": 0,
        "utc_offset": null,
        "time_zone": null,
        "geo_enabled": false,
        "verified": false,
        "statuses_count": 3,
        "lang": "en",
        "contributors_enabled": false,
        "is_translator": false,
        "is_translation_enabled": false,
        "profile_background_color": "F5F8FA",
        "profile_background_image_url": null,
        "profile_background_image_url_https": null,
        "profile_background_tile": false,
        "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_link_color": "1DA1F2",
        "profile_sidebar_border_color": "C0DEED",
        "profile_sidebar_fill_color": "DDEEF6",
        "profile_text_color": "333333",
        "profile_use_background_image": true,
        "has_extended_profile": false,
        "default_profile": true,
        "default_profile_image": false,
        "following": false,
        "follow_request_sent": false,
        "notifications": false,
        "translator_type": "none"
    },
    "geo": null,
    "coordinates": null,
    "place": null,
    "contributors": null,
    "is_quote_status": false,
    "retweet_count": 2,
    "favorite_count": 1,
    "favorited": false,
    "retweeted": false,
    "possibly_sensitive": false,
    "lang": "en"
}, {
    "created_at": "Sun Apr 09 17:33:43 +0000 2017",
    "id": 851125986976567297,
    "id_str": "851125986976567297",
    "text": "Hello world",
    "truncated": false,
    "entities": {
        "hashtags": [],
        "symbols": [],
        "user_mentions": [],
        "urls": []
    },
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e",
    "in_reply_to_status_id": null,
    "in_reply_to_status_id_str": null,
    "in_reply_to_user_id": null,
    "in_reply_to_user_id_str": null,
    "in_reply_to_screen_name": null,
    "user": {
        "id": 851119985732800513,
        "id_str": "851119985732800513",
        "name": "David",
        "screen_name": "DavidHoperz",
        "location": "",
        "description": "",
        "url": null,
        "entities": {
            "description": {
                "urls": []
            }
        },
        "protected": false,
        "followers_count": 0,
        "friends_count": 21,
        "listed_count": 0,
        "created_at": "Sun Apr 09 17:09:52 +0000 2017",
        "favourites_count": 0,
        "utc_offset": null,
        "time_zone": null,
        "geo_enabled": false,
        "verified": false,
        "statuses_count": 3,
        "lang": "en",
        "contributors_enabled": false,
        "is_translator": false,
        "is_translation_enabled": false,
        "profile_background_color": "F5F8FA",
        "profile_background_image_url": null,
        "profile_background_image_url_https": null,
        "profile_background_tile": false,
        "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg",
        "profile_link_color": "1DA1F2",
        "profile_sidebar_border_color": "C0DEED",
        "profile_sidebar_fill_color": "DDEEF6",
        "profile_text_color": "333333",
        "profile_use_background_image": true,
        "has_extended_profile": false,
        "default_profile": true,
        "default_profile_image": false,
        "following": false,
        "follow_request_sent": false,
        "notifications": false,
        "translator_type": "none"
    },
    "geo": null,
    "coordinates": null,
    "place": null,
    "contributors": null,
    "is_quote_status": false,
    "retweet_count": 0,
    "favorite_count": 0,
    "favorited": false,
    "retweeted": false,
    "lang": "en"
}]

现在，我尝试使用 jQuery 和 AJAX/jsonp 从该 PHP 页面读取数据并在我的页面上显示 twitter feed。

所以我这样做了:

    var poutput = $('#divTweets');

    $.ajax({
    url: 'config.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){



            $.each(data, function(pi,item){ 
            str = item.id_str;  
                var products = '<div id="'+item.id_str+'" class="items">'+
                               '<p class="names">'+item.text+'</p>'+
                               '</div>';

                poutput.append(products);


});


},

        error: function(){
            //alert('There was an error loading the data.');
        }


});

但是，当我运行代码时，我的 HTML 页面中什么也没有得到。我确实在控制台中查找了错误，但没有错误。

有人可以就这个问题提出建议吗？

Answer 1

删除 jsonp: 'jsoncallback', 并将 dataType:'json' 设置为 'jsonp'

您返回的是 json 而不是 jsonp。

添加错误处理以进一步调试