使用 javascript 从 php 文件中渲染 JSON 数据答案

【问题标题】：Render JSON data from php file using javascript使用 javascript 从 php 文件中渲染 JSON 数据
【发布时间】：2015-04-04 02:39:00
【问题描述】：

我正在制作一个 Web 应用程序，它根据用户在 HTML 表单中输入的城市列出所有推文。它从表单的发布数据中生成一个$_SESSION['city'] 变量。

然后 php 文件使用 session 变量作为我查询的参数。这很好，当我导航到tweets.php 时，JSON 会在我提交表单后成功从 Twitter 中提取。

我想从我的 JSON 文件 name 和 text 呈现两个字段。我试过使用下面的javascript，但无济于事。谁能告诉我哪里出错了？

$(document).ready(function() {

$.getJSON("http://localhost/Labs/AppName/public/js/tweets.php", function(feeds) {
    var feedHTML = "";
    for(var i=0; i<feeds.length; i++) {
        var tweetname = feeds[i].user.name;
        var tweet = feeds[i].text;

        feedHTML += "<p>" + tweetname + "<br />" + tweet + "</p>"; //RENDER JSON VARS
    }

    $("#twitter-feed h3").after(feedHTML);
});

});

算法的快速总结：

用户在 index.php 上的 Web 表单中输入“London”（表单发布到同一页面）。
$_POST 变量分配给$_SESSION 变量
会话变量在"https://api.twitter.com/1.1/search/tweets.json?q=".$city); 中用作参数
Javascript 将<div id="twitter-feed"> </div> 中的 HTML 附加到推文中。

示例 JSON 输出（简化）：

         "created_at":"Wed Feb 04 14:27:27 +0000 2015",
     "id":562980760127557633,
     "id_str":"562980760127557633",
     "text":"http:\/\/t.co\/lbqnmNrHue",
     "source":"IFTTT<\/a>",
     "truncated":false,
     "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":23638744,
        "id_str":"23638744",
        "name":"adrian bonnington",
        "screen_name":"xymalf",
        "location":"UK",
        "profile_location":null,
        "description":"unemployed electronics engineer.",
        "url":"http:\/\/t.co\/XmSePpitdx",
        "entities":{
           "url":{
              "urls":[
                 {
                    "url":"http:\/\/t.co\/XmSePpitdx",
                    "expanded_url":"http:\/\/about.me\/xymalf",
                    "display_url":"about.me\/xymalf",
                    "indices":[
                       0,
                       22
                    ]
                 }
              ]
           },
           "description":{
              "urls":[

              ]
           }
        },

【问题讨论】：

您能否提供一个您尝试解析和呈现的 JSON 样本？可能接收到的 JSON 的结构并不像您期望的那样。
@ziGi 在描述中添加了 JSON

标签： javascript php jquery json twitter

【解决方案1】：

这样的 ajax 函数可以做出你想要的同样的改变

$.ajax({

        url: '/Labs/AppName/public/js/tweets.php',

        type: 'post',
        data:{'city':city},
        dataType: 'json',
        timeout: 20000,
        tryCount: 0,
        retryLimit: 3,
        success: function(feeds) {
            $.each(feeds.length, function(k, each_user) {

                 feedHTML += "<p>" + each_user.name + "<br />" + each_user.text + "</p>";

            });
            $("#twitter-feed h3").after(feedHTML);
        }
    })

【讨论】：

【解决方案2】：

大多数情况下，来自 ajax 的 JSON 作为响应值需要转换为 JavaScript 对象。之后一切都变得非常简单。只需遍历对象数组，然后随意使用它们。如果响应是字符串，则向下 belove 代码工作，否则检查 JSON 验证http://jsonlint.com/

$(document).ready(function() {
     $.getJSON("http://localhost/Labs/AppName/public/js/tweets.php", function(feeds) {
       var feed = JSON.parse(feeds); //Java script object        
       var feedHTML = "";
       for(var i=0; i<feeds.length; i++) {    
         feedHTML += "<p>" + feeds[i].user.name + "<br />" + feeds[i].text + "</p>"; 
       }
       $("#twitter-feed h3").after(feedHTML);
    });
});

【讨论】：