JS实现根据用户输入行数调用randomuser API渲染表格

需求说明 #

• 对接随机用户接口https://randomuser.me/api/?results={num}，拉取数据后渲染为HTML表格，表格需展示用户名、邮箱、联系电话三个字段
• 新增自定义行数交互：页面提供数字输入框，支持用户输入1-100之间的数值，点击「Get Data」按钮后，拉取对应行数的用户数据更新表格
• 修复现有代码问题：未绑定按钮触发逻辑、表格容器被注释、innerHTML赋值引用不存在的变量

修复后完整代码 #

<h3>How Many Row You Need to Display Below ?</h3>
<form>
  <label for="fname">Please Enter Number (Max 100):</label>
  <input type="number" id="fname" name="fname" min="1" max="100" />
  <input type="submit" value="Get Data" id="results" />
</form>
<br>

<div id="f5buddytable"></div>

<script>
const baseUrl = "https://randomuser.me/api/";
const numInput = document.getElementById('fname');
const submitBtn = document.getElementById('results');
const tableContainer = document.getElementById('f5buddytable');

function fetchAndRenderUser(rowCount) {
  const xhr = new XMLHttpRequest();
  const requestUrl = `${baseUrl}?results=${rowCount}`;
  xhr.open("GET", requestUrl, true);
  xhr.onload = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const res = JSON.parse(xhr.responseText);
      let tableHtml = `
        <table border='1' cellpadding='8' cellspacing='0'>
          <tr>
            <th>User Name</th>
            <th>Email</th>
            <th>Contact</th>
          </tr>
      `;
      res.results.forEach(item => {
        const fullName = `${item.name.title} ${item.name.first} ${item.name.last}`;
        tableHtml += `
          <tr>
            <td>${fullName}</td>
            <td>${item.email}</td>
            <td>${item.phone}</td>
          </tr>
        `;
      });
      tableHtml += "</table>";
      tableContainer.innerHTML = tableHtml;
    } else {
      console.error('请求异常，状态码：', xhr.status);
    }
  };
  xhr.onerror = () => console.error('网络连接失败');
  xhr.send();
}

// 绑定提交事件
submitBtn.addEventListener('click', function(e) {
  e.preventDefault();
  const inputVal = numInput.value.trim();
  const rowNum = Number(inputVal);
  if (!inputVal || !Number.isInteger(rowNum) || rowNum < 1 || rowNum > 100) {
    alert('请输入1-100范围内的整数');
    numInput.focus();
    return;
  }
  fetchAndRenderUser(rowNum);
})

// 页面初始默认加载10条数据
fetchAndRenderUser(10);
</script>

关键修复点说明 #

• 放开被注释的表格容器#f5buddytable，补全缺失的form标签结构
• 将原页面加载即触发的请求逻辑封装为独立函数，支持传入行数参数动态拼接接口URL
• 给提交按钮绑定点击事件，触发时阻止表单默认跳转行为，读取输入值做合法性校验，校验通过后调用请求函数
• 移除innerHTML赋值时多余的不存在变量results，直接写入拼接完成的表格字符串
• 补充异常捕获逻辑，输入非法值时给出提示，网络/请求失败时打印错误日志

内容的提问来源于stack exchange，提问作者Someone