在页面1中表单内输入一个数字n提交后能在另一个页面打印n个“欢迎”字符串

在网页设计中，如果你想要实现在页面A的表单输入一个数字n后，在页面B动态显示n个"欢迎"字符串的效果，通常需要借助前端技术如HTML、JavaScript以及可能的Ajax请求。以下是基本步骤：

1. **页面A**（例如index.html）：
- 创建一个表单，包含一个输入框 `<input type="number" id="numInput" />` 和一个提交按钮 `<button onclick="submitForm()">提交</button>`。
- 使用JavaScript编写`submitForm()`函数，当用户点击按钮时获取输入框的值，并发送到服务器。

<script>
function submitForm() {
  var n = document.getElementById('numInput').value;
  // 发送Ajax请求将n传给服务器
  fetch('/print-welcomes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ num: n })
  }).then(response => response.text()).then(data => {
    window.location.href = "pageB.html"; // 跳转到页面B
  });
}
</script>

2. **服务器端处理**（例如Node.js，PHP等）：
- 在页面B对应的服务器端脚本（如server.js）中，接收到请求后，解析数据并生成n个"欢迎"字符串。

app.post('/print-welcomes', (req, res) => {
  const n = req.body.num;
  let welcomes = [];
  for (let i = 0; i < n; i++) {
    welcomes.push('欢迎');
  }
  res.send(welcomes.join('\n')); // 返回一个包含n个欢迎的字符串
});

3. **页面B**（pageB.html）：
- 到达页面B后，直接显示服务器返回的内容，如果没有做特别处理，可以用JavaScript动态插入DOM元素。

<div id="welcomeList"></div>

<script>
window.onload = function () {
  fetch('/print-welcomes')
    .then(response => response.text())
    .then(data => {
      const welcomeList = document.getElementById('welcomeList');
      data.split('\n').forEach(welcome => welcomeList.innerHTML += '<p>' + welcome + '</p>');
    });
};
</script>