我正在使用英特尔 XDK 开发混合应用程序。在我的 PHP 服务器上使用 ajax 请求的应用程序。服务器将返回 json 数据。
这是我来自服务器的示例 json。
[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"date_open":"2015-01-04",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":null,
"investment":"3000"
},
{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date_open":"2015-03-01",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":null,
"investment":"1500"
}]
这里每个用户的产品数量不同，有些没有产品，有些有 1、2...10 等产品。因此，根据用户的产品数量，最好的展示方式是什么。这样数据/项目就会全部组织起来，并在页面加载时很好地显示图像。
应该自动显示:
<强>|产品图片 |产品名称 |日期 |利润 |投资
我的 html 页面/css 样式应该设置什么？或者任何我应该了解的更多信息。
在我现有的系统上使用 PHP。我只是使用用户产品的foreach。然后为每个将显示数据的类设置样式。 示例:
foreach(products as product){
?>
<div class="img"></div>
<div class="productname">echo product['product'];</div>
<?
}
所以我在考虑是否可以像我在 PHP 中所做的那样在 html 中显示它。感谢您的帮助。
编辑:我在客户端的 ajax 调用:
$("button").click(function(){
$.ajax({
type: 'POST',
url: "http://www.sample.com/app/user-data.php",
crossDomain: true,
dataType: 'json',
data: { user_token: user_token },
success: function(data, status, jqXHR) {
//console.log(data); //`this is displaying only as object why?`
//console.log(status);
console.log(JSON.stringify(data)); //to string
},
error: function(xhr, ajaxOptions, thrownError) {
alert(ajaxOptions + " " + thrownError);
}
});
});
最佳答案
服务器应该提供像这样的 json:
<?php
$data = array();
foreach(products as product){
array_push($data, $product);
}
header('Content-Type: application/json');
echo json_encode($data);
您应该通过 ajax 获取数据，然后更新 DOM:
var dummy_data = [{
"id": "11",
"user_id": "8000",
"product": "Shoes A",
"quantity": "1",
"date_open": "2015-01-04",
"paid": "1",
"harvested": "",
"reinvest": null,
"profit": null,
"investment": "3000"
},
{
"id": "12",
"user_id": "8000",
"product": "Shoes B",
"quantity": "1",
"date_open": "2015-03-01",
"paid": "1",
"harvested": "",
"reinvest": null,
"profit": null,
"investment": "1500"
}
];
function addData(data) {
data.forEach(function(row) {
var str = '<tr>';
str += '<td>' + row.id + '</td>';
str += '<td>' + row.product + '</td>';
str += '<td>' + row.date_open + '</td>';
str += '<td>' + row.profit + '</td>';
str += '<td>' + row.investment + '</td>';
str += '</tr>';
$('#data_tbl').append(str);
});
}
$("#fetch_btn").click(function() {
//do ajax here and load data
/*
$.getJSON("get_data.php", function(result) {
addData(result);
});
*/
//for demo calling the function with dummy data
addData(dummy_data);
});table,
th,
td {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="fetch_btn">FETCH BY AJAX</button>
<table id="data_tbl">
<tr>
<th>image of product</th>
<th>name of product</th>
<th>date</th>
<th>profit</th>
<th>investment</th>
</tr>
</table>
</body>
</html>关于php - 在 HTML 中显示 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38237681/