在php中使用ajax json响应数组答案

【问题标题】：ajax json response array using in php在php中使用ajax json响应数组
【发布时间】：2012-05-27 00:06:28
【问题描述】：

我制作了一个带有 json 响应的 ajax 表单。 json 数组包含来自 mysql 数据库的信息。现在我想在表格中显示这些数据。

我在隐藏的 html 文件中做了一个占位符。

这里是我的 ajax/json 部分代码：

$("#select_coffee_talk_year").button().click(function() {
    var form = $('#coffee_talk_year');  
    var data = form.serialize();

    $.ajax({
        url: "include/scripts/select_event.php",
        type: "POST",
        data: data,
        dataType: 'json',
        success: function (select) {
            //alert(select.ID[0]);
            //alert(select.ID[1]);
            //alert(select.ID.length);


            $("#coffee_talk").fadeOut();
            $("#coffee_talk").fadeIn();
        }   
    });
    return false;
});

这是我的html：

<p class="bold underline headline">Bereits eingetragen:</p>
    <form id="coffee_talk_year" action="include/scripts/select_event.php" method="post" accept-charset="utf-8"> 
        <select name="year_coffee_talk" id="year_coffee_talk">
            <option value="none" class="bold italic">Jahr</option>
            <?php
                for($i=2008; $i<=$year; $i++){
                    if ($i == $year) {
                        echo "<option value=\"".$i."\" selected=\"$i\">".$i."</option>\n";
                    } else  echo "<option value=\"".$i."\">".$i."</option>\n";
                }   
            ?>
        </select>
        &nbsp;&nbsp;
        <button id="select_coffee_talk_year">anzeigen</button>
        <input type="hidden" name="coffee_talk_year_submit" value="true" />
    </form>
    <br />
    <div id="coffee_talk"></div>
    <br />
    <button id="add_coffee_talk">hinzufügen</button>

select_event.php：

if ('POST' == $_SERVER['REQUEST_METHOD']) {
    /*******************************/
    /** Erzaehlcafe auswählen
    /*******************************/
    if (isset($_POST['coffee_talk_year_submit'])) {
        $getID = array();
        $getDate = array();
        $getTheme = array();
        $getContributer = array();
        $getBegin = array();
        $getPlace = array();
        $getEntrance = array();
        $getFlyer = array();

        $sql = "SELECT 
                    ID,
                    Date,
                    Theme,
                    Contributer,
                    Begin,
                    Place,
                    Entrance,
                    Flyer
                FROM 
                    Coffee_talk
                WHERE
                    YEAR(Date) = '".mysqli_real_escape_string($db, $_POST['year_coffee_talk'])."'
                ";

        if (!$result = $db->query($sql)) {
            return $db->error;
        }

        while ($row = $result->fetch_assoc()) {
            $getID[$i] = $row['ID'];
            $getDate[$i] = $row['Date'];
            $getTheme[$i] = $row['Theme'];
            $getContributer[$i] = $row['Contributer'];
            $getBegin[$i] = $row['Begin'];
            $getPlace[$i] = $row['Place'];
            $getEntrance[$i] = $row['Entrance'];
            $getFlyer[$i] = $row['Flyer'];
            $i++;
        }

        $result->close();

        $response['ID'] = $getID;
        $response['Date'] = $getDate;
        $response['Theme'] = $getTheme;
        $response['Contributer'] = $getContributer;
        $response['Begin'] = $getBegin;
        $response['Place'] = $getPlace;
        $response['Entrance'] = $getEntrance;
        $response['Flyer'] = $getFlyer;

        echo json_encode($response);
    }
}

id=coffee_talk 的 Div 是我的占位符。现在我希望使用它的数据淡入表格，如果我更改年份并使用按钮提交它，我希望将旧的淡出并淡入新的。

我唯一的问题是我需要在 php 中用循环编写这个表。但我认为这在 Java Script 中是不可能的。我该怎么办？

PS 我使用 ajax 因为我不想一直重新加载。

【问题讨论】：

在 JavaScript 中什么是不可能的？循环？另外 - 响应 AJAX 的代码在哪里？你如何处理你的 JSON 响应？如果您要返回 JSON，则必须构建您的表客户端；如果返回 HTML，则可以直接放入文档中。此外，您很可能希望在该淡出上使用回调。
循环在 javascript 中是可能的。不知道如何将这些东西放入 div 中。我应该写一个 var 并将所有值放入一个大字符串中吗？然后 $('#...').html($string) this?
我知道循环在 JS 中是可能的——我只是不明白你的句子指的是什么。您可以构建一个 HTML 字符串并按照您所说的执行.html；您可以一次显式地构建一个节点并构建一个文档片段；或者您可以在 PHP 中构建 HTML 并将其作为 HTML 而不是 JSON 传输，然后使用 $('#...').load('select_event.php')。
sry 我应该写：我知道循环是可能的；）我问这个问题是因为我有很多必须写入 div 的 html 代码。在 js 上做这件事似乎是一个糟糕的选择。你的最后一个方面似乎是一个不错的选择。谢谢你的建议:)

标签： php javascript ajax json

【解决方案1】：

您的快速解决方案是：

$("#select_coffee_talk_year").button().click(function() {
    var form = $('#coffee_talk_year');  
    var data = form.serialize();

    $.ajax({
        url: "include/scripts/select_event.php",
        type: "POST",
        data: data,
        dataType: 'json',
        success: function (select) {
            var coffee_talk = $("#coffee_talk");
            coffee_talk.fadeOut('fast', function() {
                for(i in select) {
                    row = select[i];
                    div = coffee_talk.append('<div id="row_'+i+'" />');
                    for(column in row) {
                       div.append('<span class="column_'+column+'">'+row[column]+'</span>');
                    }
                }
                coffee_talk.fadeIn();
            });
        }   
    });
    return false;
});

要获得更好的方法，您应该查找 Moustache.js，它是客户端 JavaScript 模板引擎（在 PHP/Java/Ruby/Python/Go 和其他语言中具有等效项，并且基于 Google C模板）。

它将允许您创建 HTML 模板并使用变量中的数据填充它们，例如 AJAX 请求可能收到的 JSON 变量。

【讨论】：