<main> <p>用户名</p> <h3 id="username"></h3> <p>账号ID</p> <h3 id="nick"></h3> <p>电话号码</p> <h3 id="tel"></h3> <p id="loginout">退出登录</p> </main>怎样修改这段代码实现个人信息的修改？并且如何编写代码实现发送修改后的信息到数据库？

要实现个人信息的修改，您需要为每个信息项添加一个可编辑的输入框，例如：

<main>
    <p>用户名</p>
    <input type="text" id="username" value="当前用户名">
    
    <p>账号ID</p>
    <input type="text" id="nick" value="当前账号ID">
    
    <p>电话号码</p>
    <input type="text" id="tel" value="当前电话号码">
    
    <p id="saveBtn">保存修改</p>
    <p id="cancelBtn">取消修改</p>
    <p id="loginout">退出登录</p>
</main>

然后，您需要编写 JavaScript 代码来监听保存和取消按钮的点击事件，并将修改后的信息发送到服务器进行保存。以下是一个示例代码：

// 获取页面元素
const usernameEl = document.getElementById("username");
const nickEl = document.getElementById("nick");
const telEl = document.getElementById("tel");
const saveBtn = document.getElementById("saveBtn");
const cancelBtn = document.getElementById("cancelBtn");

// 监听保存按钮的点击事件
saveBtn.addEventListener("click", () => {
  const newUsername = usernameEl.value;
  const newNick = nickEl.value;
  const newTel = telEl.value;

  // 发送请求到服务器保存修改后的信息
  fetch("/api/updateUserInfo", {
    method: "POST",
    body: JSON.stringify({ newUsername, newNick, newTel }),
  })
    .then((res) => res.json())
    .then((data) => {
      if (data.success) {
        // 修改成功，更新页面信息
        usernameEl.textContent = newUsername;
        nickEl.textContent = newNick;
        telEl.textContent = newTel;
      } else {
        // 修改失败，提示用户
        alert("修改失败，请稍后再试！");
      }
    });
});

// 监听取消按钮的点击事件
cancelBtn.addEventListener("click", () => {
  // 恢复原来的信息
  usernameEl.value = usernameEl.textContent;
  nickEl.value = nickEl.textContent;
  telEl.value = telEl.textContent;
});

这里假设您的服务器端提供了一个 `/api/updateUserInfo` 接口来保存用户修改后的信息，该接口可以接受一个 JSON 格式的请求体，包含新的用户名、账号ID和电话号码。在客户端代码中，我们使用了 `fetch` 函数发送 POST 请求，并将修改后的信息以 JSON 字符串的形式放在请求体中发送到服务器。服务器端处理完请求后，会返回一个 JSON 格式的响应，指示修改是否成功。如果修改成功，则更新页面上显示的信息；否则，提示用户修改失败。

请注意，以上代码仅为示例代码，实际应用中您需要根据具体的业务逻辑进行修改。同时，为了保证数据安全，您需要在服务器端对接收到的请求进行身份认证和数据验证。