多输入字段表单的JSON序列化及合并表单后的跨查询筛选实现

结合你提到的从双表单合并为单表单，同时要把输入项1作为查询2的筛选条件的需求，我整理了一套可行的代码调整方案，咱们一步步来：

第一步：调整HTML的单表单结构 #

把原来的两个表单合并成一个，保留两个输入字段和对应的触发按钮（也可以改成一个按钮触发双查询，看你需求）：

<form id="combinedSearchForm">
  <div class="form-group">
    <label>输入项1（作为查询2的筛选条件）:</label>
    <input type="text" id="inputFilter" placeholder="请输入筛选值">
    <button type="button" id="btnSearchTable1">搜索表格1</button>
  </div>
  <div class="form-group">
    <label>输入项2:</label>
    <input type="text" id="inputQuery" placeholder="请输入查询关键词">
    <button type="button" id="btnSearchTable2">搜索表格2（带筛选）</button>
  </div>
</form>

<!-- 表格展示容器 -->
<div id="table1Wrapper" class="table-container"></div>
<div id="table2Wrapper" class="table-container"></div>

第二步：重构JS的AJAX搜索逻辑 #

原来的两个独立搜索函数可以整合，核心是在查询表格2时，主动获取输入项1的值作为筛选参数，分两种情况处理：

情况1：后端接口支持接收筛选参数（推荐） #

直接把输入1的值作为URL参数传给后端，让后端返回已经筛选好的数据：

// 先获取DOM元素
const inputFilter = document.getElementById('inputFilter');
const inputQuery = document.getElementById('inputQuery');
const btnSearch1 = document.getElementById('btnSearchTable1');
const btnSearch2 = document.getElementById('btnSearchTable2');
const table1Wrapper = document.getElementById('table1Wrapper');
const table2Wrapper = document.getElementById('table2Wrapper');

// 搜索表格1的函数（保留原有逻辑，仅读取输入1的值）
function fetchTable1Data() {
  const filterValue = inputFilter.value.trim();
  if (!filterValue) {
    alert('请先输入输入项1的内容');
    return;
  }

  // 原AJAX请求，这里用fetch示例，你也可以用jQuery的$.ajax
  fetch(`/your-api/table1?filter=${encodeURIComponent(filterValue)}`)
    .then(res => res.json())
    .then(data => renderTable(data, table1Wrapper))
    .catch(err => console.error('表格1加载失败:', err));
}

// 搜索表格2的函数，加入输入1的筛选条件
function fetchTable2Data() {
  const queryValue = inputQuery.value.trim();
  const filterValue = inputFilter.value.trim();

  // 可以根据需求判断是否必须填写筛选条件
  if (!queryValue) {
    alert('请输入查询关键词');
    return;
  }
  // if (!filterValue) { alert('请先填写输入项1作为筛选条件'); return; }

  // 把筛选参数和查询参数一起传给后端
  fetch(`/your-api/table2?query=${encodeURIComponent(queryValue)}&filter=${encodeURIComponent(filterValue)}`)
    .then(res => res.json())
    .then(data => renderTable(data, table2Wrapper))
    .catch(err => console.error('表格2加载失败:', err));
}

// 通用表格渲染函数（根据你的JSON结构调整字段）
function renderTable(data, container) {
  if (!data || data.length === 0) {
    container.innerHTML = '<p>未找到匹配的数据</p>';
    return;
  }

  // 生成表格HTML
  let tableHtml = '<table class="data-table"><thead><tr>';
  // 取第一个数据项的键作为表头
  Object.keys(data[0]).forEach(col => {
    tableHtml += `<th>${col}</th>`;
  });
  tableHtml += '</tr></thead><tbody>';
  data.forEach(row => {
    tableHtml += '<tr>';
    Object.values(row).forEach(val => {
      tableHtml += `<td>${val}</td>`;
    });
    tableHtml += '</tr>';
  });
  tableHtml += '</tbody></table>';
  container.innerHTML = tableHtml;
}

// 绑定按钮点击事件
btnSearch1.addEventListener('click', fetchTable1Data);
btnSearch2.addEventListener('click', fetchTable2Data);

// 可选：绑定表单提交事件，按回车时触发双查询
document.getElementById('combinedSearchForm').addEventListener('submit', e => {
  e.preventDefault();
  fetchTable1Data();
  fetchTable2Data();
});

情况2：后端不支持筛选，前端自行处理 #

如果后端没法帮你筛选，那就在拿到表格2的原始数据后，用JS的filter方法做前端筛选：

// 修改fetchTable2Data的then回调
.then(rawData => {
  const filterValue = inputFilter.value.trim();
  // 根据你的数据结构筛选，比如筛选row的category字段等于filterValue
  const filteredData = rawData.filter(row => row.category === filterValue);
  renderTable(filteredData, table2Wrapper);
})

第三步：可选的联动优化 #

如果想要输入1变化时自动更新表格2（前提是输入2已经有值），可以添加输入事件监听：

inputFilter.addEventListener('input', () => {
  if (inputQuery.value.trim()) {
    fetchTable2Data();
  }
});

关键注意点 #

• 用encodeURIComponent编码URL参数，避免特殊字符（比如空格、&）导致请求异常
• 对输入值做trim()处理，避免空字符串干扰查询
• 如果是jQuery的AJAX，逻辑类似，只是把fetch换成$.ajax即可

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