如何将关联数组从 PHP 传递到 HTML 以进行进一步处理

jeddi 发表于 Dev

杰迪

在我的 HTML 页面上，我有一个通过 PHP 发送数据库查询的脚本。现在我需要将带有结果的数组（一个关联数组）传递回我的 HTML 页面以填充一些文本区域。

问题（我是 PHP 新手）：

1- 数组可以按原样传递还是需要编码/解码或序列化/反序列化（以及如何）？

2- 一旦数组到达 HTML 脚本，我就可以通过循环遍历它的元素（我的意思是，是否可以在 HTML 脚本中进行循环？）

3-如果后者是不可能的，那么我如何指示 PHP 在 HTML 页面上填充给定的文本区域？

编辑（现在有代码）：

//HTML
<script>
    function PopulateTextAreas() 
    {
        var arrayTextAreasNames = ["name","surname","dob"];

        //Now pass this to php
        var xhttp = new XMLHttpRequest();

        var jsonstring = JSON.stringify(arrayTextAreasNames);
        var encoded = encodeURIComponent(jsonstring);

        xhttp.open("GET", "LoadFromDb.php?hId=" + "&arrayTextAreasNames=" + encoded, true);

        xhttp.onreadystatechange = function() 
        {
            if (this.readyState == 4 && this.status == 200) 
            {
                    var decoded = json_decode(this.responseText);
                    console.log(decoded); //Not working

          //A loop would then follow to separate each element of the array and then populate the corresponding textareas is a way similar to below:
           //document.getElementById("name").value = this.responseText; 
           //document.getElementById("surname").value = this.responseText;
           //document.getElementById("dob").value = this.responseText;
            }
        };
        xhttp.send(); 
    }
</script>  




//PHP
    //The associative array is built in a loop like this
    $ArrayDbEntryName_and_itsValue[$i] [$DbItemName] = $DbItemValue;

    //and it looks like the follow one:

array(3) {
  [0]=>
  array(1) {
    ["name"]=>
    string(1) "paul"
  }
  [1]=>
  array(1) {
    ["surname"]=>
    string(2) "green"
  }
  [2]=>
  array(1) {
    ["dob"]=>
    string(8) "1/1/1980"
  }

    //Then the array is echoed back to the HTML page like this
    $ResultStringified = JSON.stringify($ArrayDbEntryName_and_itsValue);
    echo encodeURIComponent($ResultStringified);

80 年代

编辑：以下信息是根据 OP（在包含海报代码之前）。

PHP 中的数组不能传递给 HTML。相反，您可以将该数组转换为更有用的格式，然后可以将其发送到 HTML。为此，您通常使用 JSON（Javascript Object Notation）格式。例如，假设您在 PHP 文件中创建了一个关联数组。
```
$info = ["firstname" => "somename", "age" => 25, "address"=>["home"=>"something1","collage"=>"something2"]];
```
现在您必须将 $info 转换为 JSON 格式。您使用以下功能来做到这一点。
```
$jsoninfo = json_encode($info);
```
JSON 格式仅由名称-值对组成。Name 是“firstname”，它的值是“somename”。那是第一个名称-值对。等等。由于您想在 HTML 上显示它，您可以回显 $jsoninfo：

echo $jsoninfo;

这就是它在 HTML 上的外观。
```
{"firstname":"somename","age":25,"address":{"home":"something1","collage":"something2"}};
```
但是你说你想把它填充到 HTML 的 textarea 中。因此我使用这个而不是那个简单的回声。这将创建一个 textarea 元素并将整个值 $jsoninfo 放入该 textarea 元素中。
```
echo "<textarea>".$jsoninfo."<textarea>"; // this is not a good practice to send value to HTML like this way, since you asked about it I had to write like that. You will need javascript to actually play with the JSON object and then write it to HTML.
```

与数组不同，您必须从 JSON 中使用名称-值对中的名称来获取其关联值。你将需要 javascript。我给你看。

由于这不是有关 javascript 的教程，因此我将直接介绍。

假设您的 html 页面中还有一个空的段落元素（我们将需要它），它的 id 是“p1”。像下面这样：

<p id='p1'></p>

现在我们将在 HTML 中或来自已包含在 HTML 中的外部 js 文件中使用以下 javascript 代码。在这里，我将其编写为 HTML 中的内联脚本。

<script>
var getfromtextarea = document.getElementsByTagName("textarea")[0].innerHTML; //get the JSON object from textarea and save it into a javascript variable named getfromtextarea
var get2 = JSON.parse(getfromtextarea); //JSON.parse() function is used to convert JSON object into javascript plain object so that we can get the value associated to its name(remember name-value pair), you will understand this is next line.
document.getElementById("p1").innerHTML = get2.firstname; //this will write/print "somename"(without quotes) inside the p element that we had created in HTML.
</script>