JSON格式页面展示美化方法

{"name": "monkey","age": "24","height": 164.0} 

如果想让以上son字符串在页面上展示的比较易读,即变成下面的style:

{
"name": "monkey",
"age": "24",
"height": 164.0cm
} 

本文介绍的方法基于javascript ,代码如下:

<html>
  <head>/
//style中是css代码
 <style type="text/css">
body
{
 white-space: pre;
font-family: monospace;
}
</style>  
//script中是javascript代码
 <script>
   window.error_id_msgs = <%= error_id_msgs | raw %>;
   function myFunction() {
   document.body.innerHTML = "";
   document.body.appendChild(document.createTextNode(JSON.stringify(window.error_id_msgs, null, 4)));
}     
 </script>
 
 </head>
   
 <body οnlοad="myFunction()"> //表示页面加载时调用myFunction()
 </body>
 </html>  

其中window.error_id_msgs是所要转换的json对象,css和myFunction结合可实现页面展示转换.

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的实现方式: 1. 留言上传页面(upload.php) ```php <!DOCTYPE html> <html> <head> <title>留言上传</title> </head> <body> <h1>留言上传</h1> <form action="save_message.php" method="post" enctype="multipart/form-data"> <label for="author">作者ID:</label> <input type="text" name="author" required><br> <label for="time">时间:</label> <input type="datetime-local" name="time" required><br> <label for="subject">主题:</label> <input type="text" name="subject" required><br> <label for="content">正文:</label> <textarea name="content" required></textarea><br> <label for="image">图片:</label> <input type="file" name="image"><br> <input type="submit" value="提交"> </form> </body> </html> ``` 2. 留言保存页面(save_message.php) ```php <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { // 获取表单数据 $author = $_POST["author"]; $time = $_POST["time"]; $subject = $_POST["subject"]; $content = $_POST["content"]; $image = ""; if ($_FILES["image"]["error"] == UPLOAD_ERR_OK) { // 上传文件 $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["image"]["name"]); move_uploaded_file($_FILES["image"]["tmp_name"], $target_file); $image = $target_file; } // 保存留言到文件 $message = array( "author" => $author, "time" => $time, "subject" => $subject, "content" => $content, "image" => $image ); $messages = array(); if (file_exists("messages.json")) { // 如果文件存在,读取已有的留言 $messages = json_decode(file_get_contents("messages.json"), true); } array_push($messages, $message); file_put_contents("messages.json", json_encode($messages)); echo "留言已保存。"; } ?> ``` 3. 留言列表页面(list_messages.php) ```php <?php session_start(); if (!isset($_SESSION["page"])) { $_SESSION["page"] = 1; } $page_size = 10; // 每页显示的留言数 $messages = array(); if (file_exists("messages.json")) { // 如果文件存在,读取已有的留言 $messages = json_decode(file_get_contents("messages.json"), true); } $total_pages = ceil(count($messages) / $page_size); // 总页数 $current_page = $_SESSION["page"]; $start_index = ($current_page - 1) * $page_size; // 当前页第一条留言的索引 $end_index = min($start_index + $page_size, count($messages)); // 当前页最后一条留言的索引(不包含) ?> <!DOCTYPE html> <html> <head> <title>留言列表</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5; } .pagination { display: inline-block; margin-top: 20px; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) { background-color: #ddd; } </style> </head> <body> <h1>留言列表</h1> <table> <thead> <tr> <th>ID</th> <th>时间</th> <th>主题</th> <th>操作</th> </tr> </thead> <tbody> <?php for ($i = $start_index; $i < $end_index; $i++) { ?> <tr> <td><?php echo $i + 1 ?></td> <td><?php echo $messages[$i]["time"] ?></td> <td><?php echo $messages[$i]["subject"] ?></td> <td><a href="view_message.php?id=<?php echo $i ?>">查看</a></td> </tr> <?php } ?> </tbody> </table> <div class="pagination"> <?php for ($i = 1; $i <= $total_pages; $i++) { ?> <a href="?page=<?php echo $i ?>"<?php if ($i == $current_page) {echo ' class="active"';} ?>><?php echo $i ?></a> <?php } ?> </div> </body> </html> ``` 4. 留言详情页面(view_message.php) ```php <?php if (isset($_GET["id"])) { $id = $_GET["id"]; $messages = array(); if (file_exists("messages.json")) { // 如果文件存在,读取已有的留言 $messages = json_decode(file_get_contents("messages.json"), true); } if ($id >= 0 && $id < count($messages)) { $message = $messages[$id]; } } ?> <!DOCTYPE html> <html> <head> <title>留言详情</title> <style> img { max-width: 100%; } </style> </head> <body> <h1>留言详情</h1> <?php if (isset($message)) { ?> <p><strong>作者ID:</strong><?php echo $message["author"] ?></p> <p><strong>时间:</strong><?php echo $message["time"] ?></p> <p><strong>主题:</strong><?php echo $message["subject"] ?></p> <p><strong>正文:</strong><?php echo $message["content"] ?></p> <?php if (!empty($message["image"])) { ?> <p><strong>图片:</strong></p> <img src="<?php echo $message["image"] ?>"> <?php } ?> <p><a href="list_messages.php">返回列表</a></p> <?php } else { ?> <p>留言不存在。</p> <?php } ?> </body> </html> ``` 5. 导航菜单(menu.php) ```php <!DOCTYPE html> <html> <head> <title>留言板</title> </head> <body> <h1>留言板</h1> <ul> <li><a href="upload.php">上传留言</a></li> <li><a href="list_messages.php">浏览留言</a></li> </ul> <hr> </body> </html> ``` 其他页面包含导航菜单: upload.php: ```php <?php include("menu.php") ?> <!-- 留言上传页面内容 --> ``` save_message.php: ```php <?php include("menu.php") ?> <!-- 留言保存页面内容 --> ``` list_messages.php: ```php <?php include("menu.php") ?> <!-- 留言列表页面内容 --> ``` view_message.php: ```php <?php include("menu.php") ?> <!-- 留言详情页面内容 --> ``` 注意事项: 1. 上传的文件保存在 uploads 目录下,需要保证该目录有写权限。 2. 为了简化代码,没有进行输入验证和安全处理,请勿直接用于生产环境。 3. 分页使用了 session 来保存当前页码,需要开启 session 功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值