PHP如何将JSON数据输出到前端HTML页面。

PHP如何将JSON数据输出到前端HTML页面。

项目教程qingyu2023-06-15 21:09:22673A+A-

  具体实现过程如下:

  1. 定义JSON数据,并使用json_decode函数将其解码为PHP数组。

  2. 在HTML页面中使用PHP代码输出数组中的各个属性和值,包括type、notes、forecastBonus和ballCombinationList。

  3. 使用CSS样式美化页面,包括设置背景颜色、字体、字号、行高、边距、阴影等。

  4. 使用CSS样式设置列表样式、列表项样式、字体加粗等,使页面更加易于阅读和理解。

  纯php代码实现:

<?php
// 定义JSON数据
$jsonData = '[{"type":"香蕉杯","notes":10,"forecastBonus":42.6,"isShow":null,"ballCombinationList":[{"number":"广西","homeTeam":"[10]南宁","visitingTeam":"[8]桂林","content":"温度(25.9)"}]}]';

// 将JSON数据解码为PHP数组
$data = json_decode($jsonData, true);

// 输出JSON数据的type属性
echo "<p>Type: " . $data[0]['type'] . "</p>";

// 输出JSON数据的notes属性
echo "<p>Notes: " . $data[0]['notes'] . "</p>";

// 输出JSON数据的forecastBonus属性
echo "<p>Forecast Bonus: " . $data[0]['forecastBonus'] . "</p>";

// 输出JSON数据的ballCombinationList属性
echo "<p>Ball Combination List:</p>";
echo "<ul>";
foreach ($data[0]['ballCombinationList'] as $ballCombination) {
    // 输出ballCombinationList中每个元素的number属性
    echo "<li>Number: " . $ballCombination['number'] . "</li>";
    // 输出ballCombinationList中每个元素的homeTeam属性
    echo "<li>Home Team: " . $ballCombination['homeTeam'] . "</li>";
    // 输出ballCombinationList中每个元素的visitingTeam属性
    echo "<li>Visiting Team: " . $ballCombination['visitingTeam'] . "</li>";
    // 输出ballCombinationList中每个元素的content属性
    echo "<li>Content: " . $ballCombination['content'] . "</li>";
}
echo "</ul>";
?>

  加html:

<?php
$jsonData = '[{"type":"香蕉杯","notes":10,"forecastBonus":42.6,"isShow":null,"ballCombinationList":[{"number":"广西","homeTeam":"[10]南宁","visitingTeam":"[8]桂林","content":"温度(25.9)"}]}]';
$data = json_decode($jsonData, true);
?>

<!DOCTYPE html>
<html>
<head>
	<title>JSON Data</title>
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			color: #333;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		li {
			margin-bottom: 10px;
		}
		li span {
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>JSON Data</h1>
		<p>Type: <?php echo $data[0]['type']; ?></p>
		<p>Notes: <?php echo $data[0]['notes']; ?></p>
		<p>Forecast Bonus: <?php echo $data[0]['forecastBonus']; ?></p>
		<p>Ball Combination List:</p>
		<ul>
			<?php foreach ($data[0]['ballCombinationList'] as $ballCombination) { ?>
				<li>
					<span>Number:</span> <?php echo $ballCombination['number']; ?><br>
					<span>Home Team:</span> <?php echo $ballCombination['homeTeam']; ?><br>
					<span>Visiting Team:</span> <?php echo $ballCombination['visitingTeam']; ?><br>
					<span>Content:</span> <?php echo $ballCombination['content']; ?>
				</li>
			<?php } ?>
		</ul>
	</div>
</body>
</html>


点击这里复制本文地址 欢迎来到大黄鸡源码分享网
qrcode

大黄鸡源码编程网 © All Rights Reserved.  
网站备案号:闽ICP备18012015号-4
Powered by Z-BlogPHP
联系我们| 关于我们| 广告联系| 网站管理