Ajax将对象数组返回给jquery和php

Question

Ajax将对象数组返回给jquery和php

4

我不确定自己是否做得正确，但如果有人能解释一下这个过程，我会很感激。

在我的 main.php 文件中，我有一个带有 onclick 函数的 div。

<div class='show_products' onclick='getData(".$id.")'>

jQuery函数：

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
    type: 'POST',
    dataType:'json',
    data: {id: id},
    success: function(response) {
        console.log(response); //shows a list of objects (array elements)
    }
});
}

以及ajax文件

$sql = "SELECT ......";
$results = Db::getInstance()->ExecuteS($sql);
foreach($results as $row) {
    $product_id = $row['product_id'];
    $date = $row['date'];
    $name = $row['name'];

    $array_info['product_id'] = $product_id;
    $array_info['date'] = $date;
    $array_info['name'] = $name;
}

echo json_encode($array_info);

以上代码返回在ajax文件中创建的数组，返回给jquery的成功函数。

我不明白的是：我该如何浏览数组并在main.php文件中使用它？我想遍历它并用数组中的值创建一个表。意味着3列，产品ID-日期-名称，它们将由从ajax返回的数组填充。

这是否可能或者我做错了？

欢迎任何帮助。

编辑：更新jquery代码。

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
    type: 'POST',
    dataType:'json',
    data: {id: id},
    success: function(response) {
        document.getElementById('table_'+id).style.display='block';

        for ( var i = 0; i < response.length; i++ ) {
            console.log(response[i]);                
            var div = document.getElementById('table_'+id);
            div.innerHTML = div.innerHTML + '<tr><td>'+response[i].product_id+'</td><td></td><td></td><td></td><td></td></tr>';
        }
    }
});
}

- shieldcy

https://dev59.com/wXRB5IYBdhLWcg3wEDul - Mohamed-Yousef

1

谢谢@Mohamed-Yousef，我会仔细阅读它。 - shieldcy

4个回答

2

你需要做的第一步是将响应解析为json格式，然后创建一个带有id的表格标签。

例如，这是你的JS代码：

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
type: 'POST',
dataType:'json',
data: {id: id},
success: function(response) {
    var data = JSON.parse(response);
    var st = "";
    $.each(data, function(index){
       st += "<tr><td>"+data[index].product_id+"</td>";
       st += "<td>"+data[index].date+"</td>";
       st += "<td>"+data[index].name+"</td></tr>";
    });
    $("#table_id").html(st);
}
});
}

那么这里是HTML。

<table border="1" id="table_id">
</table>

- Adzimzf

好的建议，谢谢。我之前是使用InnerHTML来添加它，这样做看起来很丑陋。你的方法似乎更好。 - shieldcy

我认为您想要始终更新表格内容，因此最好使用HTML而不是追加。如果这个答案对您有帮助，请给它一个绿色的赞。 - Adzimzf

0

这里的问题是JavaScript不允许使用关联数组，因此您必须使用常规数字数组或对象。

以下是使用数字数组的示例：

$sql = "SELECT ......";
$results = Db::getInstance()->ExecuteS($sql);
foreach($results as $row) {
    $product_id = $row['product_id'];
    $date = $row['date'];
    $name = $row['name'];

    $array_info[0] = $product_id;
    $array_info[1] = $date;
    $array_info[2] = $name;
}

echo json_encode($array_info);

然后你可以得到这样的输出：

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
    type: 'POST',
    dataType:'json',
    data: {id: id},
    success: function(response) {

      var product_id = response[0];
      var date = response[1];
      var name = response[2];

    });
    }

- dshukertjr

0

您可以使用JSON.parse()函数对响应进行解析，以便JavaScript可以使用它。

- Dawood Najam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vulkhan · Accepted Answer

在你的foreach循环中，每次循环都会覆盖preview循环中定义的数据，因此当你的foreach循环结束时，最终只留下了最后一组数据。

你不需要遍历这个数组，因为你的查询已经返回一个数组。

$sql = "SELECT ......";
$results = Db::getInstance()->ExecuteS($sql);
echo json_encode($results);

现在，如果你想从成功的函数中访问你的数据，你只需要使用和你的行相同的名称来调用它们。例如，如果你的行是product_id、date和name，那么你将以这种方式调用它们：

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
    type: 'POST',
    dataType:'json',
    data: {id: id},
    success: function(response) {
        response = JSON.parse(response);

        console.log("Product id is: " + response[0].product_id);
        console.log("Product name is: " + response[0].name);
        console.log("Product date: " + response[0].date);
    }
});
}

您还需要了解以下内容：假设由于某种原因，您想在不更改数据库的情况下为您的json设置不同的变量名称，则必须执行以下操作：

$sql = "SELECT ......";
$results = Db::getInstance()->ExecuteS($sql);
$newResults = array();

foreach ($results as $row)
{
    $newResults[] = array('newId' => $row['product_id'], 'newName' => $row['name'], 'newDate' => $row['date']);
}

echo json_encode($newResults);

更改JSON中的变量将导致什么结果:

function getData(id){    
$.ajax({
    url: 'ajax_info.php',
    type: 'POST',
    dataType:'json',
    data: {id: id},
    success: function(response) {
        response = JSON.parse(response);

        console.log("Product id is: " + response[0].newId);
        console.log("Product name is: " + response[0].newName);
        console.log("Product date: " + response[0].newDate);
    }
});
}