Question

我遇到了以下问题。我想通过ajax显示一个多数组。

使用Javascript：

function getContent(HSID,HSname){
        $.ajax({
            url: 'ajax/script.gethandlungslogContent.php',
            type: "POST",
            data: { HSID : HSID },
            dataType : "json",
            success: function(data) {
                document.getElementById('wartungslogHead').innerHTML = HSname;
                document.getElementById('wartungslogContent').innerHTML = data.hl_aenderung;
                document.getElementById('wartungslogID').value = data.HSID;
                //document.getElementById('wartungslogID').value = data.KentID;

                document.getElementById('buttonEdit').style.display = 'inline';
                document.getElementById('buttonDelete').style.display = 'inline';
            }
        });
    }

PHP脚本：

<?php
    include_once('../classes/class.mysql.php');

    if (isset($_POST['HSID'])){$HSID = $_POST['HSID'];};

    $HSID = 2;

    $mydb3 = new DB_MySQL('localhost','','','');
    $query3 = "SELECT * FROM hosting_handlungslog WHERE HSID = '$HSID'";
    $mydb3->query($query3);
    while ($row3 = $mydb3->fetchRow()){
        echo json_encode($row3);    
    }
?>

php脚本的返回如下所示：

    {"HLID":"1","HSID":"2","hl_datum":"2014-01-19","hl_info":"n","hl_aenderung":"Windows-UpdatesJava Update"}
    {"HLID":"2","HSID":"2","hl_datum":"2014-02-02","hl_info":"n","hl_aenderung":"Windows-UpdatesTomcat-UpdateApache-Update"}
    {"HLID":"3","HSID":"2","hl_datum":"2014-03-03","hl_info":"n","hl_aenderung":"Windows-UpdatesTomcat-UpdateApache-Update"}
    {"HLID":"4","HSID":"2","hl_datum":"2014-04-13","hl_info":"y","hl_aenderung":"Windows-UpdatesTomcat-Update auf 6.0.39Apache Update 2.4.8 (OpenSSL auf 1.0.1g)"}
    {"HLID":"5","HSID":"2","hl_datum":"2014-04-14","hl_info":"n","hl_aenderung":"Zertifikatsaustausch wegen Heartbleed Bug"}
    {"HLID":"6","HSID":"2","hl_datum":"2014-04-27","hl_info":"y","hl_aenderung":"Java Update auf 7.0.58"}
    {"HLID":"7","HSID":"2","hl_datum":"2014-06-08","hl_info":"y","hl_aenderung":"Windows-UpdatesTomcat-Update auf 6.0.41Apache Update auf 2.4.9 (OpenSSL auf 1.0.1h)Java Update auf 7.0.60"}
    {"HLID":"8","HSID":"2","hl_datum":"2014-07-21","hl_info":"y","hl_aenderung":"Apache Update auf 2.4.10Java Update auf 7.0.62"}

这里做什么？提前谢谢！

Answer 1

您必须将其保存到另一个数组并在从mysql获取所有数据后显示。

<?php
    include_once('../classes/class.mysql.php');

    if (isset($_POST['HSID'])){$HSID = $_POST['HSID'];};

    $HSID = 2;

    $myjsonarray = null;
    $mydb3 = new DB_MySQL('localhost','','','');
    $query3 = "SELECT * FROM hosting_handlungslog WHERE HSID = '$HSID'";
    $mydb3->query($query3);
    while ($row3 = $mydb3->fetchRow()){
        $myjsonarray[] = $row3;    
    }
    echo json_encode($myjsonarray);
?>

现在你得到了这个

[{"HLID":"1","HSID":"2","hl_datum":"2014-01-19","hl_info":"n","hl_aenderung":"Windows-UpdatesJava Update"},{"HLID":"2","HSID":"2","hl_datum":"2014-02-02","hl_info":"n","hl_aenderung":"Windows-UpdatesTomcat-UpdateApache-Update"},{"HLID":"3","HSID":"2","hl_datum":"2014-03-03","hl_info":"n","hl_aenderung":"Windows-UpdatesTomcat-UpdateApache-Update"},...]

示例在php中显示...

<?php 
      echo $myjsonarray[0]["HLID"]; 
      echo $myjsonarray[1]["HLID"]; 
?>

在jquery中，你可以使用＆＃34; 代替＆＃34;

for(i=0;i<data.lenght;i++){
    mydata = data[i];
    alert(mydata["HSname"]);
}

Answer 2

将您的PHP更改为：

$tempArray = array();
while ($row3 = $mydb3->fetchRow()){
        tempArray[] = $row3;    
    }
echo json_encode($tempArray);

然后在javascript：

success: function(data) {
    $.each(data, function(index, item){
        // Now loop through e.g. 
        $('body').append('<div class="wartungsLogID">' + item.HSID + '</div>');
    });
}

Answer 3

在你的javascript中，在成功回调中，你需要解析json（var data）。如果您有表格元素，则可以用数据填充它。首先，你需要一张桌子和周期：

var t = document.getElementById(mytableId);
for (var i = 1; i < data.length; i++)

...

在循环内部，您需要为json中的每个对象创建一行：

var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = data[i].hl_aenderung;
tr.appendChild(td);
t.appendChild(tr);

并为每个字段重复此操作（每个对象的属性（hl_datum，hl_info等））。

Answer 4

在Ajax Success回调中，您必须遍历数组以单独显示每个对象。

以下是一个示例，包括一些best practice技术：

success: function(data) {
    var textToDisplay = '';

    $.each(data, function(i, item){
        textToDisplay += '<li data-id="'+item.HLID+'">'+item.hl_aenderung+'</li>'
    });

    $('ul').append(textToDisplay);
}

Here's a working fiddle您可以展开。

JQuery Ajax多阵列响应

4 个答案: