如何实现无刷新网页表单自动填写，批量录入10000条ID查询对应数据

方案核心逻辑 #

观察到目标页面的ID输入框绑定了onblur="LoadInfo()"失焦事件，输入ID后触发该事件即可无刷新加载关联数据，无需页面重载，因此最优方案为直接在浏览器控制台运行原生JavaScript脚本，无需安装任何额外工具，也无需逆向网站接口参数，复用页面现有逻辑即可完成10000条数据的批量处理。 #

具体实现步骤 #

1. 预处理ID数据 #

将待录入的10000条10位数字ID整理为JavaScript数组格式，如果你手里的ID是一行一个的TXT文件，可以用以下逻辑转换：

// 示例ID数组，替换为你自己的所有ID
const idList = `1234567890
0987654321
1122334455`.split('\n').filter(id => id.trim().length === 10);

2. 运行自动化处理脚本 #

打开目标页面，按F12打开开发者工具，切换到控制台（Console）标签，粘贴以下脚本运行即可：

// 配置项
const REQUEST_INTERVAL = 500; // 每条ID处理间隔，单位毫秒，避免频率限制建议不低于200
const result = []; // 存储所有ID对应的关联结果

// 批量处理函数
async function batchProcess() {
  const nidInput = document.querySelector('input#NId[type="text"]');
  if (!nidInput) {
    console.error('未找到ID输入框，请确认页面已加载完成');
    return;
  }
  for (let i = 0; i < idList.length; i++) {
    const currentId = idList[i].trim();
    // 赋值ID到输入框
    nidInput.value = currentId;
    // 触发失焦事件，调用LoadInfo加载关联数据
    nidInput.dispatchEvent(new Event('blur'));
    
    // 等待数据加载完成，可根据页面响应速度调整等待时间
    await new Promise(resolve => setTimeout(resolve, 300));
    
    // 读取返回的关联字段，可按需增加需要抓取的字段
    const item = {
      nid: currentId,
      personId: document.querySelector('#PersonId')?.value || '',
      guidId: document.querySelector('#GuidId')?.value || '',
      firstName: document.querySelector('#Firstname')?.value || ''
    };
    result.push(item);
    console.log(`已处理第${i+1}/${idList.length}条：`, item);
    
    // 等待间隔再处理下一条
    await new Promise(resolve => setTimeout(resolve, REQUEST_INTERVAL));
  }
  console.log('全部处理完成，结果如下：', result);
  // 自动导出结果为CSV文件
  exportToCsv(result);
}

// CSV导出工具函数
function exportToCsv(data) {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(item => Object.values(item).map(val => `"${val}"`).join(','));
  const csvContent = [headers, ...rows].join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  link.setAttribute('href', url);
  link.setAttribute('download', `ID关联结果_${new Date().getTime()}.csv`);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 启动处理
batchProcess();

注意事项 #

• 可根据网站的响应速度调整REQUEST_INTERVAL和等待加载的时间，避免因请求过快被网站限制访问
• 如果页面数据加载是异步接口请求，可替换固定等待逻辑为接口响应监听、DOM变化监听，进一步提升处理效率
• 脚本运行过程中不要关闭当前页面，可最小化后台运行

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