如果我通过ajax响应追加所有的html数据是好的做法吗？

Question

i wanted to ask i am running a ajax function that loads all the data to my html. now all the data shows itself but i have done this by appending all the data as their are so many post i need to create a loop that shows all the post in a loop

here is my code

    <script type="text/javascript">
 $(window).load(function(e){

    // grab the scroll amount and the window height
       loadmore();
       // get_recieve_friend_requests();
       // get_sent_friend_requests();
    });

 function loadmore(){
          var lastID = $('.load-more').attr('lastID');
         //alert(lastID);

              jQuery.ajax({
                  type:'POST',

                  url:'<?php echo base_url("user/get_all_post"); ?>',
                   data: {id:  lastID },
                      dataType: 'json', 


                  beforeSend:function(data){
                      $('.load-more').show();
                  },
                  success:function(data){

                         var ParsedObject = JSON.stringify(data);            
                         var json = $.parseJSON(ParsedObject);



                         if (json=="") {
                          $("#bottom").append('<div class="btn btn-default col-md-6" >'+'No More Results'+'</div>');
                          $("#Load_more_data").hide()

                         }else{
                           $postID=json[json.length-1].id;

              $('.load-more').attr('lastID', $postID);

                $.each(json, function (key, data) {
   $post_id=data.id;

   var post_id=data.id;
     // $('.post_id_value').attr('post_id', $post_id);
    var post_status=data.status;
     var status_image=data.status_image;
    var multimage=data.multimage;


                             if(!post_status=="" && !status_image==""){
                               $("#status_data").append('<input type="text" value="'+ post_id+'" class="post_id_value"> <div class="col-md-6 postdata"><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname;?></a><div class="weshare_user_status">'+post_status+'</div><div class="weshare_user_singleimage"><img style="height:300px; width:400px;" src="<?php echo base_url('uploads'); ?>/'+status_image+'"></div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a  onclick="like();"><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a href="#"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li></ul></div></div></div>');
                             }else{

                             }

                              if(!post_status=="" && status_image==""){
                               $("#status_data").append('<input type="text" value="'+ post_id+'" class="post_id_value"><div class="col-md-6 postdata" ><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname;?></a><div class="weshare_user_status">'+post_status+'</div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a  onclick="like();"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a ><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a href="#"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li></ul></div></div></div>');
                             }else{

                             }


                             if (multimage=="") {

                             }
                              else{
                               $("#status_data").append('<input type="text" value="'+ post_id+'" class="post_id_value"><div class="col-md-6 postdata" ><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname; ?></a><div class="weshare_user_multimage"><img style="height:300px; width:400px;" src="<?php echo base_url('uploads'); ?>/'+multimage+'"></div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a  onclick="like();"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a href="#"><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a ><span class="glyphicon glyphicon-share-alt"></span> Share</a></li></ul></div></div></div>');
                              }                              

                    });
                  }
              }
            });
          }
                  function like()
          {
              var Post_id = $('.post_id_value').attr('value');
              var User_id = $('.id_data').attr('value');
              alert(Post_id);
                jQuery.ajax({
                  type:'POST',
                  url:'<?php echo base_url("user/post_likes"); ?>',
                  data: {Post_id:  Post_id,User_id:User_id},
                  dataType: 'json', 
                  success:function(data)
                  {
                    console.log(data);
                    alert();
                  }
          });
              }

  </script>

see that i have created all the div in a response is it possible to return all these values so that i can accesss them in a loop using $.each as there are 500 posts so what can i do can you tell me?

when i alert 'json' it shows me this look at the image

Answer 1

Access global scope javascript object filled by ajax.

Like this? (it is not exact solution, just for an inspiration)

<script type="text/javascript">
    var posts={};
    $(window).load(function(e){
       ajax();
    }
    function ajax(){
       //... the ajax stuff
       success:function(ajaxData){
          //... json stringify and parse object
          $.each(json, function (key, data){//fill the global scope object with received data to be accessible outside the ajax function
              posts.push({data.post_id:{"post_status":data.post_status, "status_image":data.status_image}});
          }
       }
    }
</script>