使用 Ajax 调用返回的数据，动态内容答案

【问题标题】：Use returned data from Ajax call, dynamic content使用 Ajax 调用返回的数据，动态内容
【发布时间】：2016-05-23 17:16:21
【问题描述】：

我正在尝试使用 Ajax、php/Codeigniter 和 Javascript 动态创建一些内容，方法是将视图中的表单提交到获取和填充数组的控制器。想法是使用来自表单的输入来获取数据，并在第一个视图中创建图表（基于获取的数据）以显示在弹出的 div 中。

我从主视图调用这个来提交表单：

function test() {
    var url = "path/to/controller/"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $("#myForm").serialize(), 
        success: function(data) {
            $('#test-container').show();
            $('#test-container').html(data);
        }
    });
}

控制器脚本中填充数组的函数，我们称之为fetchedData；

function getSomeData() {
    /* ..Fetching data.. */
    return fetchedData;
}

现在我想在第一个视图中使用填充的数组，在弹出的 div 中进行 Ajax 调用，例如：

<div>
    /* ...Use the content of the returned array (fetchedData) to make some charts with javascript and php..  */
</div>

没有显示任何内容，因为我不确定如何获取数组中的数据。这是可能的还是错误的方法？我是否应该将内容作为新视图加载到控制器中并尝试在弹出的 div 中显示它？

【问题讨论】：

你得到它的格式是什么：XML、JSON？这些格式在客户端更容易使用。我不确定我们是否可以只处理“fetchedData（返回的数组）”

标签： jquery ajax codeigniter

【解决方案1】：

可以向ajax请求返回不同的数据类型。这段代码

$('#test-container').html(data);

暗示 - 至少 - 正在返回纯文本，尽管文本很可能也包含 html 标记。您需要知道 type data 将是什么才能使用它。还要了解data 是您从 php 函数中回显的任何内容。返回的最常见的数据类型是 text/html 和 json。

如果fetchedData 是一个数组，那么您希望返回通常在浏览器中显示为 javascript 对象的 json。

通过在 PHP 中构造一个关联数组，如

$foo = 'fooish';
$bar = 123;
$out = array('somedata' => $foo, 'otherdata' => $bar);

然后将它的 json 编码版本回显给客户端

echo json_encode($out);

success 的 data 对象看起来像

{somedata: 'fooish', otherdata: 123}

您可以使用标准 javascript 表示法来访问对象的属性，例如 data.somedata 或 data.otherdata。

另一方面，如果您创建一些 html 并将其从服务器回显

echo "<div class='cool-stuff'>The value of $foo is $bar</div>";

那么data 将包含字符串“The value of fooish is 123”并且使用调用$('#test-container').html(data); 可能会在浏览器中产生输出。（如果存在 id 为 'test-container' 的 html 元素，它无论如何都应该存在。）

我希望这可以帮助您掌握获得所需结果的可能方法。

【讨论】：

【解决方案2】：

“return fetchedData;” php 函数返回 PHP 中的数据。

但它不会将“数据”返回给调用 PHP 脚本的 ajax 函数。

要取回数据，您需要将$fetchedData 转换为字符串并回显该字符串，然后该字符串会到达运行您的javascript 函数的浏览器。当然，您需要解析字符串以将其转换为对象。

所以你的 php 必须对数据进行编码，如下所示：

$data_json = htmlentities(json_encode($data));
echo $data_json;

然后就可以将生成的json数据解析成一个对象了；

var data = $.parseJSON(json_data);

【讨论】：