Как добавить элемент в XMLHttpRequest, эхом от PHP?

Question

на моей стороне контроллера у меня есть три данные, вторит ..

echo $variant->Field1; 

и на моей стороне клиента, у меня ниже АЯКС кода,

function variants(master_id,sku) 
{ 

        if(master_id=="") 
        { 
        document.getElementById("variants").innerHTML = "";  
         return false; 
        } 
        else 
        { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function() 
         { 
         if (xhttp.readyState == 4 && xhttp.status == 200) 
         { 
          document.getElementById("variants").innerHTML = xhttp.responseText; 
         } 

        }; 
         xhttp.open("GET", "{{ url('/getVariants') }}"+'/'+master_id+'/'+sku, true); 
         xhttp.send(); 
        } 

Теперь у меня есть `

<div class="column"> 
      <div class="ui fluid image"> 
      <div class="ui black ribbon label"> 
      <i id="variants"></i> <!-- displaying variants --> 
      </div> 
      <img src="/images/wireframe/image.png"> 
     </div> 
     </div>` 

Я не хочу, чтобы имена отображались в одном теге ... вместо этого ... для каждого эхо-данных мне нужен новый элемент столбца ... Как мне это сделать?

Любой ответ на это очень заметно ..

Answer 1

Вместо вторя каждый данные, которые вы должны поместить все данные в объекте или массив и эхо в JSON:

echo json_encode($data_array); 

Со стороны клиента то вы можете получить ответ и перебрать его, чтобы разместить контент в разных элементах.

if (xhttp.readyState == 4 && xhttp.status == 200) 
{ 
    var jsonResponse = JSON.parse(xhttp.responseText); 
    var text = ''; 
    for(var key in jsonResponse) 
    { 
     text += '<p>'+jsonResponse[key]+'</p>'; 
    } 
    document.getElementById("variants").innerHTML = text; 
}