Question

我想知道如何通过javascript将数组值传递给HTML？我知道我们可以很好地将它放在表格中以便在PHP脚本中进行设计，然后传递给javascript以附加到id="default"。

但我更喜欢将设计和逻辑分开。因此，如何通过javascript处理从php传递的数组，然后将其附加到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>

编辑脚本

$("#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();
});

然后循环遍历数据数组并将其附加到目的地。

如何通过javascript将数组传递给PHP？

1 个答案: