如何在 JavaScript 中将 JSON 数据附加到 HTML？答案

【问题标题】：How to append the JSON data to HTML in JavaScript?如何在 JavaScript 中将 JSON 数据附加到 HTML？
【发布时间】：2016-02-03 07:23:27
【问题描述】：

我使用 JSON 数组获取一些数据。我想将每个数据附加到一个 div 中。但我不明白这有什么问题？

控制器

   function get_performers()
   {
    $id = $this->input->post('id'); 
    $exam = $this->input->post('exam'); 
    $datas=$this->job->get_top_ten_st_data($id,$exam);
    $out['student_details'] = $datas;
     echo json_encode($out); 
   }

脚本

function get_performers(id,exam)
{

    $.ajax({
        url:"<? echo base_url();?>class_analysis/get_performers", 
        dataType: 'json',
        type: "POST",
        data: {id:id,exam:exam},      
        success:function(result) {  
            // alert("haii");
            console.log(result);
            result = JSON.parse(result);

          var tab= "<div class='col-xs-2 blk-ht'>  <span class='hd'>Names</span> </div>";
           for(var i=0;i<result.student_details.length;i++)
            {

                 tab=tab+"<div class='col-ds-1'><span class='subjNames'>" + result.student_details[i]["subject_name"]+ "</span></div> ";
            }   

           jQuery("#subjectNames").append(tab);

        }
    }); 
}

这有什么问题吗？

【问题讨论】：

你期望发生什么现在正在发生什么？
我想将标签附加到特定的 div id
console.log(result); 的输出是什么？
在控制台中我得到的都是空值。那有什么问题
然后你应该检查你的 PHP 的输出，因为 .ajax 调用从服务器获得了 null。我个人使用 Postman 来测试我的服务器 API..

标签： javascript jquery html json codeigniter

【解决方案1】：

尝试 html 而不是 append

  jQuery("#subjectNames").html(tab);

另外，如果jQuery("#subjectNames") 与您的控制台中的null 相等，这意味着您在html 中没有id="subjectNames" 的元素而不是id="#subjectNames" 或其他元素。可能是你使用类然后尝试$(".subjectNames") 和. 而不是#

【讨论】：

【解决方案2】：

循环应该可以工作...似乎是您的结果的另一个问题。

var tab= "<div class='col-xs-2 blk-ht'><span class='hd'>Names</span> </div>";
for(var i=0;i<20;i++)
{
  tab=tab+"<div class='col-ds-1'><span class='subjNames'>" + "test: " + i + "</span></div> ";
}   
jQuery("#subjectNames").append(tab);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subjectNames"><div>

【讨论】：

【解决方案3】：

dataType: 'json' in $.ajax options - 自动解析你的 json

并使用 JQUERY )))

AJAX 功能成功

$.each( result.student_details, function( key, value ) {
      alert( key + ": " + value );
});

【讨论】：

【解决方案4】：

<?php 
function get_performers()
{
    $id = $this->input->post('id'); 
    $exam = $this->input->post('exam'); 
    $datas=$this->job->get_top_ten_st_data($id,$exam);
    $out['student_details'] = $datas;
    echo json_encode($out); 
}
?>
<script>
$.ajax({
    url:"<? echo base_url();?>class_analysis/get_performers", 
    dataType: 'json',
    type: "POST",
    data: {id:id,exam:exam},      
    success:function(result) {

        $.each(response.student_details, function(key,value){
             appendHtml(key,value);
        });


    }
}); 

function appendHtml(key,value)
{
    var tab= "<div class='col-xs-2 blk-ht'>  <span class='hd'>Names</span> </div>";
    tab = tab+"<div class='col-ds-1'><span class='subjNames'>" +value+ "</span></div> ";
    jQuery("#subjectNames").append(tab);
}

</script>

【讨论】：