将变量从 Ajax 传递到 Javascript答案

【问题标题】：Passing Variable From Ajax to Javascript将变量从 Ajax 传递到 Javascript
【发布时间】：2016-09-18 13:48:35
【问题描述】：

我知道这个问题已经被问过并且可能回答了几次，但不是在我要求的确切上下文中，所以为了确保我完全理解，我想问我的具体情况。

我要求在加载 HTML / Javascript 页面时，它会触发服务器端调用以从数据库中查询一些信息。然后，此信息应在服务器端形成一个数组，然后可以将其传递给客户端。然后我应该能够从客户端循环遍历数组并将它们推送到客户端数组（我循环和推送的原因是因为在这种情况下，我可能需要在将某些条目放入数组之前用字符串作为前缀) 然后显示给用户。

我目前只看到了针对和替换 div 而不是数组的示例。

我尝试了一些不同的代码尝试，但遗憾的是没有运气（而且似乎无法完全理解如何在客户端和服务器之间传递值）。

对于它的价值，我相当精通其他语言（C#、Python），所以当涉及到这类东西时我并不是一个完全的新手，但这是对 Javascript/Ajax 的一个相当新的尝试。

【问题讨论】：

当您在客户端循环数据时 - 为您循环的每个元素创建一个容器/行。在循环结束时，追加到页面上的容器。
显示您遇到问题的代码。
我能想象的唯一答案是指向教程的指针，这对于 SO 来说是 Off Topic。 A Minimal, Complete and Verifiable example 你所尝试的方法是唯一能从票数接近的候选人那里提出这个问题的方法

标签： javascript php arrays ajax

【解决方案1】：

在传输用于 JavaScript 的数据时，通常最容易使用 JavaScript Object Notation (JSON)，因此使用 json_encode：

<?php
//somearray.php
$arr = ["bar", "baz", "kaz"];
header('Content-Type: application/json');
echo json_encode($arr);

然后，您只需使用库或其他方式发出 AJAX 请求，解码 JSON 并像在 JavaScript 中创建它一样处理：

<html>
<body>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://example.com/somearray.php";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        prefix(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function prefix(arr) {
    var output = [];
    var i;
    for(i = 0; i < arr.length; i++) {
        output.push('foo ' + arr[i]);
    }
    console.log(output); //["foo bar", "foo baz", "foo kaz"]
}
</script>
</body>
</html>

（修改自http://www.w3schools.com/json/tryit.asp?filename=tryjson_http）

然后，此信息应在服务器端形成一个数组，然后可以将其传递给客户端。然后我应该能够从客户端循环遍历数组并将它们推送到客户端数组中

阅读更多关于 HTTP、它是如何成为“无状态”协议以及 AJAX 请求实际在做什么（提示；它仍然是无状态的）可能会有所帮助，因为听起来您不了解数据在服务器上的位置/客户端。

【讨论】：

【解决方案2】：

好的，这里有一个小例子来说明如何做到这一点。当您使用 JSON 时，它实际上非常简单。使用 PHP 中的json_encode()，您可以轻松地将数组转换为 JSON，通过 AJAX 接收它们并使用每个循环处理数据。

下面是代码，您可以将其用于测试： HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX JSON Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(function(){
                $.getJSON('ajax.php',function(data){
                    $.each(data,function(index,value){
                        $('body').append('Name: ' + value.name + ' | City: ' + value.city + '<br />');
                    })
                });
            });
        </script>
    </head>

    <body>

    </body>

</html>

PHP：

<?
// I was too lazy to set up a DB for this example.
// You should know how to process database data in PHP
/*
$sql = "SELECT `id`,`name`,`city` FROM `useres`";
$result = $db->query($sql);
while($array = $db->assoc($result))
{
    $json['id']['name'] = $array['name'];
    $json['id']['city'] = $array['city'];
}
*/

// This part is only the example data which you should have received from the DB
$json[1]['name'] = 'Test Tester';
$json[1]['city'] = 'Test Village';

$json[2]['name'] = 'Claud Atlas';
$json[2]['city'] = 'Haven';

// echo the array as JSON
echo json_encode($json);
?>

这里有一个来自上述代码的实例：https://work.walter-it.de/test/ajax/

【讨论】：