Как передать массив на PHP через javascript?

Question

Мне интересно, как передать значение массива в HTML через javascript? Я знаю, что мы могли бы красиво поместить его в таблицу для целей дизайна в самом скрипте PHP, а затем перейти к javascript для добавления на id="default".

Но я предпочитаю отделять дизайн и логику. Поэтому как обрабатывать массив, переданный с php через javascript, а затем добавлять его в HTML?

PHP

try { 
    $stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order"); 
    $stmt->execute(); 
    $result = $stmt->fetchAll(); 
    $default = array(); 
    foreach($result as $row) 
    { 
     $top_level_id=$row['top_level_id']; 
     $top_level_name=$row['top_level_name']; 
     array_push($default, array("id" => $row['top_level_id'],"item" => $row['top_level_name'])); 
    } 
     $default; 
    } 
    catch(PDOException $e) { 
    'Error: ' . $e->getMessage(); 
    } 

Javacript

$("#clickme").on("click",function() 
{ 
    var xmlhttp = getXmlHttp(); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       if (this.responseText !== null) { 
        var ajaxElm = document.getElementById('default'); 
        ajaxElm.innerHTML = this.responseText; 
        var item_array=ajaxElm.innerHTML; 
        //how to process array retrieved from php script here and then append to id="default"? 
        for(var i=0;i<item_array.length;i++) 
        { 
         var id=item_array[i].id; 
         var name=item_array[i].name; 
        } 
       } 

      } 
     } 
     xmlhttp.open("GET", "selectTopLevel.php"); 
     xmlhttp.send(); 
}); 

HTML

<div class="row"> 
    <div class="small-12 medium-12 large-12 columns text-center"> 
    <a href="#" data-reveal-id="myModal" id="clickme" data-reveal>Click Me!</a> 
    </div> 
    </div> 

EDITED сценарий

$("#clickme").on("click",function() 
{ 
    var xmlhttp = getXmlHttp(); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       if (this.responseText !== null) { 
       /* var ajaxElm = document.getElementById('default'); 
        ajaxElm.innerHTML = this.responseText; 
        var item_array=ajaxElm.innerHTML; 

        for(var i=0;i<item_array.length;i++) 
        { 
         var id=item_array[i].id; 
         var name=item_array[i].name; 
        }*/ 
        var data = JSON.parse(this.responseText); 
       for (i = 0; i < data.length; i++) 
        { 
         var id=data[i].id; 
         var name=item_array[i].name; 
         $("#default").append("name= "+name); 
        } 
       } 

      } 
     } 
     xmlhttp.open("GET", "selectTopLevel.php"); 
     xmlhttp.send(); 
}); 

Answer 1

Просто оберните данные в формате JSON. Что-то вроде этого:

PHP

$output = array(); 
try { 
    $stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order"); 
    $stmt->execute(); 
    $result = $stmt->fetchAll(); 
    foreach($result as $row) 
    { 
     $top_level_id=$row['top_level_id']; 
     $top_level_name=$row['top_level_name']; 
     array_push($output, array("id" => $row['top_level_id'],"item" => $row['top_level_name'])); 
    } 
} 
catch(PDOException $e) { 
    //'Error: ' . $e->getMessage(); 
} 
echo json_encode($output); 

Javascript

$("#clickme").on("click",function() 
{ 
    var xmlhttp = getXmlHttp(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      if (this.responseText !== null) { 
       var data = JSON.parse(this.responseText); 
       // do something with your data 
      } 

     } 
    } 
    xmlhttp.open("GET", "selectTopLevel.php"); 
    xmlhttp.send(); 
}); 

Тогда просто цикл через массив данных и добавить его к месту назначения.