使用JavaScript从php文件渲染JSON数据

Question

I'm producing a web app that lists all tweets based on a city that a user enters into a HTML form. It produces a $_SESSION['city'] variable from the form's post data.

Then the php file uses the session variable as a parameter for my query. This is fine and when I navigate to tweets.php the JSON is successfully pulled from twitter after I submit the form.

There are two fields I'd like to render from my JSON file name and text . I've tried using the javascript below but to no avail. Can anyone tell me where I'm going wrong?

$(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);
});

});

A quick summary of the algorithm:

1. User enters "London" into web form on index.php (form posts to same page).
2. $_POST variable assigned to $_SESSION variable
3. Session variable used as parameter in "https://api.twitter.com/1.1/search/tweets.json?q=".$city);
4. Javascript appends the HTML in <div id="twitter-feed"> </div> with the tweets.

Sample JSON output (reduced):

         "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":[

              ]
           }
        },

Answer 1

ajax function like that can make same changes u want

$.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);
        }
    })

Answer 2

JSON as response value from ajax in most cases needs to be converted to JavaScript object. After that everything is really simple. Just iterate over array of objects, and use them as you wont. Down belove code work if response is a string otherwise check JSON validation 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);
    });
});