php – 以HTML格式显示JSON数据

2019-07-02 07:16:25 阅读：316 来源： 互联网

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

我正在使用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){
          ?>
          <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>

标签：jquery,json,php,html,hybrid-mobile-app
来源： https://codeday.me/bug/20190702/1353703.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

php – 以HTML格式显示JSON数据