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

我使用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);

        }
    }); 
}

函数获取执行者（id，检查）
{
$.ajax({
url:“类\分析/获取\执行者”，
数据类型：“json”，
类型：“POST”，
数据：{id:id，exam:exam}，
成功：函数（结果）{
//警报（“haii”）；
控制台日志（结果）；
result=JSON.parse（result）；
var tab=“名称”；
对于（var i=0；iTryhtmlnotappend

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

另外，如果控制台中的
jQuery（“#subjectNames”）
等于
null
，这意味着您在html中没有
id=“subjectNames”
的元素，而不是
id=“#subjectNames”
或其他。您可能使用类，然后尝试
$（“.subjectNames”）
使用
而不是
#
循环应该可以工作…这似乎是您的结果的另一个问题


var tab=“名称”；
对于$.ajax选项中的（var i=0；idataType:'json'，自动解析json

并使用JQUERY）

成功实现了AJAX功能

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


$.ajax({
url:“类\分析/获取\执行者”，
数据类型：“json”，
类型：“POST”，
数据：{id:id，exam:exam}，
成功：功能（结果）{
$.each（response.student_详细信息、函数（键、值）{
附录HTML（键、值）；
});
}
}); 
函数appendHtml（键、值）
{
var tab=“名称”；
制表符=制表符+“”+值+“”；
jQuery（“#subjectNames”）.append（制表符）；
}
console.log（结果）的输出是什么；
？在控制台中，我得到的所有值都是空值。有什么问题吗？然后你应该检查PHP的输出，因为
.ajax
调用从服务器得到
null
。我个人使用Postman来测试我的服务器API。。
<?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>