使用php和json实现html页面,php – 以HTML格式显示JSON数据

我正在使用intel XDK开发混合应用程序.在应用程序上我使用ajax请求到我的PHP服务器.服务器将使用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){

?>

echo product['product'];

}

所以我在想是否可以像在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：

$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 = '

';

str += '

' + row.id + '';

str += '

' + row.product + '';

str += '

' + row.date_open + '';

str += '

' + row.profit + '';

str += '

' + row.investment + '';

str += '

';

$('#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;

}

JS Bin

FETCH BY AJAX

image of product	name of product	date	profit	investment

标签：jquery,json,php,html,hybrid-mobile-app

来源： https://codeday.me/bug/20190702/1353703.html