静态网站怎么更新数据

news2024/9/19 6:36:45

今天看到个问题

我不是行业从业者，但目前遇到一个问题
我公司网站为纯静态，除了直接从html里修改文字外能不能这样
建立一个xml或者txt文档，其中有很多信息，例如网站名称，电话，备案号等，一行一行的
我从html里通过什么代码能读取这个xml里指定的内容显示到相应的位置，例如title里等；
这样后期有其他需求，我直接修改这个xml即可，求帮助

这种对于数据安全性不是特别高的纯静态网站中，使用JavaScript来读取JSON文件并在HTML页面中动态显示数据是比较常见做法。这种方法允许你将数据和表示层分离，使得维护和更新变得更为简单。下面举一个简单的例子，来看看怎么在HTML中使用JavaScript读取JSON文件并显示数据，达到动态更新的目的。

首先，创建一个JSON文件（例如data.json），内容如下：

{
  "siteName": "我的公司",
  "phone": "123-456-7890",
  "recordNumber": "ICP备12345678号"
}

然后，在你的HTML文件中，可以使用以下JavaScript代码来读取JSON文件并显示数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            fetch('data.json')
                .then(response => response.json())
                .then(data => {
                    document.title = data.siteName;
                    document.getElementById('site-name').textContent = data.siteName;
                    document.getElementById('phone').textContent = data.phone;
                    document.getElementById('record-number').textContent = data.recordNumber;
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <h1 id="site-name"></h1>
    <p>电话: <span id="phone"></span></p>
    <p>备案号: <span id="record-number"></span></p>
</body>
</html>

在这个例子中，我们使用了fetch API来异步获取JSON数据。当数据被成功解析后，我们使用DOM操作将数据插入到相应的HTML元素中。

如果是数组的话，可以按照下面的代码来参考

{
  "siteName": "我的公司",
  "phone": "123-456-7890",
  "recordNumber": "ICP备12345678号",
  "news": [
    {
      "title": "新闻标题一",
      "date": "2023-07-18",
      "summary": "这是新闻一的摘要描述..."
    },
    {
      "title": "新闻标题二",
      "date": "2023-07-17",
      "summary": "这是新闻二的摘要描述..."
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><span id="site-name"></span></title>
    <style>
        #news-list li {
            margin-bottom: 1em;
        }
    </style>
    <script>
        window.onload = function() {
            fetch('data.json')
                .then(response => response.json())
                .then(data => {
                    document.title = data.siteName;
                    document.getElementById('site-name').textContent = data.siteName;

                    const newsList = document.getElementById('news-list');
                    data.news.forEach(news => {
                        const item = document.createElement('li');
                        item.innerHTML = `
                            <h2>${news.title}</h2>
                            <span>${news.date}</span>
                            <p>${news.summary}</p>
                        `;
                        newsList.appendChild(item);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <h1 id="site-name"></h1>
    <ul id="news-list">
        <!-- 新闻列表将在这里动态生成 -->
    </ul>
</body>
</html>