javascript - 如果我通过 ajax 响应附加所有 html 数据，这是一个好习惯吗？

Question

我想问我正在运行一个 ajax 函数，它将所有数据加载到我的 html 中。现在所有数据都会显示出来，但我已经通过附加所有数据来完成此操作，因为它们的帖子太多了，我需要创建一个循环来显示循环中的所有帖子

这是我的代码

    <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>

看到我已经在响应中创建了所有 div 是否可以返回所有这些值，以便我可以使用 $.each 在循环中访问它们，因为有 500 个帖子，所以我能做什么，你能告诉我吗？

当我提醒“json”时，它向我显示图像 的外观

Answer 1

访问由ajax填充的全局范围的javascript对象。

像这样吗？ (这不是精确的解决方案，仅供引用)

<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>