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， Lable是p_name，

Answer 1

你需要动态创建div，所以创建一个函数，将这个json数组作为参数并循环到它，以便用必要的div和id动态创建label

首先，如果阻止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内。

如何将sting数组附加到html div ni ajax。

1 个答案: