javascript - jquery ajax 函数在成功时生成动态内容

Question

我有这个function迭代一个array，我想动态地生成所有 te div，其中array应该显示来自的信息......萤火虫检查器显示divs在那里，但图像和信息没有显示。我非常感谢你们能给我的任何帮助，这是我的代码

        $("#busca").on('click', function(){

        $.ajax({ 
        type    : "POST",
        url     : "service.php",
        dataType: "json",
        data    : {
            action:"fullProjects",
            },          
            success:function(data){

                var i;
                for (i = 0; i < data.data.length; ++i) {

                    console.log(i);

                    var divCreator ='';

                    divCreator+='<div id="grupo'+i+'" class="typeface-js" style="font-family:GreyscaleBasic">';
                    divCreator+='<div class="tipo-pro">';
                    divCreator+='<div id="tipo_'+i+'" class="tipo"></div>';
                    divCreator+='<div id="tipo_arq_abajo'+i+'" class="abajo"></div>';
                    divCreator+='</div>';
                    divCreator+='<div id="fotoproyectos'+i+'" class="foto"></div>';
                    divCreator+='<div id="nombreproyectos'+i+'" class="nombre-pro"></div>';
                    divCreator+='</div>';
                    divCreator+='</div><br><br><br><br><br><br>';

                    $("#contiene-pro").append(divCreator);

                    //$("#fotoproyectos"+i).empty();
                    var htmlThings = '';
                    htmlThings += '<img src="' + data.data[i].path + '" height="128" width="160">';
                    $("#fotoproyectos"+i).append(htmlThings);

                    $("#nombreproyectos"+i).empty();
                    var htmlMoreThings = '';
                    htmlMoreThings += "<form method=\"post\" name=\"projectsearch\" id=\"projectsearch"+ i +"\" action=\"proyectos_arq.php\">" 
                    htmlMoreThings += "<span style=\"cursor: pointer;\" onclick=\"document.getElementById('projectsearch"+ i +"').submit()\">"+ data.data[i].projectName +"</span>"
                    //html2 += "<button id=" + "button" + data.projectId + " style=\"visibility:hidden;\"><span id=" + data.projectId + " style=\"cursor: pointer;\"><span>" + data.projectName + "</span></span></button>"
                    htmlMoreThings += "<input name=\"project_id\" type=\"hidden\" id=\"project_id\" value=" + data.data[i].projectId + ">"  
                    htmlMoreThings += "</form>"
                    $("#nombreproyectos"+i).append(htmlMoreThings);


                };

            }
        })

    });

contiene-pro是其余div's所有帮助的主要容器真的很感激......我尝试了一种不同的方法，结果相同

$("#busca").on('click', function(){

        $.ajax({ 
        type    : "POST",
        url     : "service.php",
        dataType: "json",
        data    : {
            action:"fullProjects",
            },          
            success:function(data){

                var i;
                for (i = 0; i < data.data.length; ++i) {

                    console.log(i);

                    var divCreator ='';

                    divCreator+='<div id="grupo'+i+'" class="typeface-js" style="font-family:GreyscaleBasic">';
                    divCreator+='<div class="tipo-pro">';
                    divCreator+='<div id="tipo_'+i+'" class="tipo"></div>';
                    divCreator+='<div id="tipo_arq_abajo'+i+'" class="abajo"></div>';
                    divCreator+='</div>';
                    divCreator+='<div id="fotoproyectos'+i+'" class="foto"><img src="' + data.data[i].path + '" height="128" width="160"></div>';
                    divCreator+='<div id="nombreproyectos'+i+'" class="nombre-pro"><form method=\"post\" name=\"projectsearch\" id=\"projectsearch"+ i +"\" action=\"proyectos_arq.php\">';
                    divCreator+='<span style=\"cursor: pointer;\" onclick=\"document.getElementById('projectsearch"+ i +"').submit()\">"+ data.data[i].projectName +"</span>'
                    divCreator+='<input name=\"project_id\" type=\"hidden\" id=\"project_id\" value=" + data.data[i].projectId + ">';
                    divCreator+='</form></div>';
                    divCreator+='</div>';
                    divCreator+='</div><br><br><br><br><br><br>';

                    $("#contiene-pro").append(divCreator);


                };

            }
        })

    });

Answer 1

由于“&”不匹配，您的代码有太多错误。修复：

$("#busca").on('click', function() {

  $.ajax({
    type : "POST",
    url : "service.php",
    dataType : "json",
    data : {
      action : "fullProjects",
    },
    success : function(data) {

      var i;
      for ( i = 0; i < data.data.length; ++i) {

        console.log(i);
        var thisData = data.data[i];
        var divCreator = '';

        divCreator += '<div id="grupo' + i + '" class="typeface-js" style="font-family:GreyscaleBasic">';
        divCreator += '<div class="tipo-pro">';
        divCreator += '<div id="tipo_' + i + '" class="tipo"></div>';
        divCreator += '<div id="tipo_arq_abajo' + i + '" class="abajo"></div>';
        divCreator += '</div>';
        divCreator += '<div id="fotoproyectos' + i + '" class="foto"><img src="' + thisData.path + '" height="128" width="160"></div>';
        divCreator += '<div id="nombreproyectos' + i + '" class="nombre-pro"><form method="post" name="projectsearch" id="projectsearch' + i + '" action="proyectos_arq.php">';
        divCreator += '<span style="cursor: pointer;" onclick="document.getElementById("projectsearch' + i + '").submit()">' + thisData.projectName + '</span>';
        divCreator += '<input name=\"project_id\" type=\"hidden\" id=\"project_id\" value="' + thisData.projectId + '">';
        divCreator += '</form></div>';
        divCreator += '</div>';
        divCreator += '<br><br><br><br><br><br>';
        $("#contiene-pro").append(divCreator);
      };
    }
  });
});