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

Question

在我的 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);

Answer 1

编辑:以下信息根据OP(在包含发布者的代码之前)。

1. PHP 中的数组无法传递到 HTML。相反，您将该数组转换为更可用的格式，然后可以将其发送到 HTML。为此，通常使用 JSON(Javascript 对象表示法)格式。例如，假设您在 PHP 文件中创建一个关联数组。

   $info = ["firstname" => "somename", "age" => 25, "address"=>["home"=>"something1","collage"=>"something2"]];
   

   现在您必须将 $info 转换为 JSON 格式。您可以使用以下函数来执行此操作。

   $jsoninfo = json_encode($info);
   

   JSON 格式仅由名称-值对组成。名称是“firstname”，其值是“somename”。这是第一个名称/值对。等等。因为你想在 HTML 上显示它，所以你回显 $jsoninfo:

   echo $jsoninfo;

   这就是它在 HTML 上的外观。

   {"firstname":"somename","age":25,"address":{"home":"something1","collage":"something2"}};
   

   但是您说过要将其填充到 HTML 中的文本区域中。因此我使用这个而不是那个简单的 echo 。这将创建一个 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.
   

2. 与数组不同，在 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>
   

3. 很多事情都是可能的，你只需要学习技术并遵守规则即可。我希望它能帮助您理解一些事情。