javascript - 如何在ajax中将字符串数组附加到html div。？

Question

这里我有字符串数组的输出。来自 php json。我想将此输出提供给 html div tabcontent，但我不知道该怎么做。这是我的小代码，任何人都可以帮助我。

[{"id":"1","p_name":"g_t1","P_Type":"gp_1","paid_type":"0"},{"id":"2","p_name":"g_t2","P_Type":"gp_2","paid_type":"1"},{"id":"3","p_name":"g_t3","P_Type":"gp_3","paid_type":"0"}]

   $("a.tablinks").on('click',function(e){
        e.preventDefault();
        var p_name = $(this).attr('value');
        alert(p_name);
    $.ajax({
            url:"<?php echo base_url(); ?>Gettabdata",
            type: "POST",           
            dataType: 'json',
            data:{Paper_name : p_name},

           success : function(data){                    

                if(data != ""){                 
                    data = JSON.stringify(data);                    
                    console.log(data);
                   alert(data);

                }else{                                  
                    data = JSON.stringify(data);
                    console.log(data);
                   $.each(data, function(k, v) {
                      alert(k + ':' + v+ " 1 working else .!"); 
                   });
                }
           },
           error : function(data){              
                data = JSON.stringify(data);    
                console.log(data);

                   $.each(data, function(k, v) {
                      alert(k + ':' + v + ' error'); 
                   });
           }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id" class="tabcontent" style="border:none;">

                            <div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">                            

                                <label style="padding:10px 10px;">  Label Name </label>
                                <span class="input-group-btn" style="padding-top:10px;">
                                    <button class="btn btn-info" type="button">Go!</button>
                                </span>     
                            </div>

                        </div>

这是我的ajax

<script>
   $("a.tablinks").on('click',function(e){
        e.preventDefault();
        var p_name = $(this).attr('value');
        alert(p_name);
    $.ajax({
            url:"<?php echo base_url(); ?>Gettabdata",
            type: "POST",           
            dataType: 'json',
            data:{Paper_name : p_name},

           success : function(data){                    

                if(data != ""){                 
                    data = JSON.stringify(data);                    
                    console.log(data);
                   alert(data);

                }else{                                  
                    data = JSON.stringify(data);
                    console.log(data);
                   $.each(data, function(k, v) {
                      alert(k + ':' + v+ " 1 working else .!"); 
                   });
                }
           },
           error : function(data){              
                data = JSON.stringify(data);    
                console.log(data);

                   $.each(data, function(k, v) {
                      alert(k + ':' + v + ' error'); 
                   });
           }
        });
    });
</script>

我想将检索到的字符串数组添加到 html div tabcontent 下方(tabcontent 输入组类将创建三次。取决于 id 的数量。)。

<div id="id" class="tabcontent" style="border:none;">

                            <div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">                            

                                <label style="padding:10px 10px;">  Label Name </label>
                                <span class="input-group-btn" style="padding-top:10px;">
                                    <button class="btn btn-info" type="button">Go!</button>
                                </span>     
                            </div>

                        </div>

在 html tabcontent 中添加什么？

Tabcontent id 是P_type, 标签是p_name,

Answer 1

您需要动态创建 div，因此创建一个函数，将此 json 数组作为参数并循环到它以创建 div动态与必要 id和 label

首先，你需要在if block 中指定这个函数data != ""

if(data != ""){    
   createDiv(data);  //this function is responsible to create div dynamically      
   data = JSON.stringify(data);                    
   console.log(data);
   alert(data);
}

现在 createDiv()功能是这样的

function createDiv(data){
var dynamicHTML = '';
for(var i=0; i<data.length; i++){
  dynamicHTML += '<div id="'+ data[i].P_Type +'" class="tabcontent" style="border:none;">'+
                        '<div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">'+
                            '<label style="padding:10px 10px;">'+ data[i].p_name +'</label>'+
                            '<span class="input-group-btn" style="padding-top:10px;">'+
                                '<button class="btn btn-info" type="button">Go!</button>'+
                            '</span>'+   
                        '</div>'+
                    '</div>';
}
$("body").append(dynamicHTML);

动态创建的 div 会立即附加到 HTML 正文中。您可以指定父项 div比如说，<div id='content'></div>并在 createDiv() 函数中更改这行代码 $("body").append(dynamicHTML);至 $("#content").append(dynamicHTML); 如果你想将它附加到 div 中在页面中。