使用Ajax实时搜索函数时如何向JavaScript传递两个变量？

看起来你已经搭好了分类选择的下拉框，要实现实时搜索的话，传递两个变量到JS其实有好几类简单实用的方法，我结合你的场景给你拆解一下：

方法1：触发函数时直接传入参数 #

如果你的两个变量分别是分类下拉框的值和搜索输入框的关键词（这是实时搜索的常见组合），可以直接在onchange事件里把这两个值作为参数传给showResult函数：

首先给搜索框加个ID（假设你还没加）：

<form>
  <select name="category" id="category" onchange="showResult(this.value, document.getElementById('searchInput').value)" title="choose the category which you'll search">
    <option value="">카테고리를 선택하세요</option>
    <option value="dic">사전</option>
    <option value="term">의학용어 영한 표준번역</option>
    <option value="kcd">질병표준코드</option>
    <option value="3d">3D</option>
    <!-- 其他选项 -->
  </select>
  <input type="text" id="searchInput" placeholder="输入搜索关键词">
</form>

然后在JS里接收这两个参数，直接用于Ajax请求：

function showResult(selectedCategory, searchKeyword) {
  // 先做个简单校验，比如分类没选的话提示用户
  if (!selectedCategory) {
    alert('请先选择分类');
    return;
  }

  // 用这两个变量发起Ajax请求，记得编码避免乱码
  const url = `/your-search-api?category=${encodeURIComponent(selectedCategory)}&keyword=${encodeURIComponent(searchKeyword)}`;
  
  // 这里用fetch举例，你也可以用XMLHttpRequest或者jQuery的$.ajax
  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(searchResults => {
      // 这里处理实时返回的搜索结果，比如渲染到页面上
      console.log('搜索结果:', searchResults);
    })
    .catch(error => console.error('错误:', error));
}

方法2：在JS函数内部主动获取变量 #

如果不想在HTML的事件属性里写太长的代码，也可以在showResult函数内部自己获取需要的两个变量，这样HTML会更简洁：

修改HTML的onchange：

<select name="category" id="category" onchange="showResult()" title="choose the category which you'll search">
  <!-- 选项不变 -->
</select>

然后JS函数里主动获取：

function showResult() {
  // 获取分类下拉框的值
  const selectedCategory = document.getElementById('category').value;
  // 获取搜索框的值
  const searchKeyword = document.getElementById('searchInput').value;

  // 后续的校验和Ajax请求逻辑和方法1一致
  if (!selectedCategory) {
    alert('请先选择分类');
    return;
  }

  const url = `/your-search-api?category=${encodeURIComponent(selectedCategory)}&keyword=${encodeURIComponent(searchKeyword)}`;
  // ... 发起请求并处理结果
}

方法3：利用data属性传递自定义变量 #

如果你的第二个变量不是来自输入框，而是页面上的自定义固定值/其他元素的属性，可以给下拉框（或其他元素）加data-*属性来存储：

比如给select加一个自定义的data属性：

<select name="category" id="category" data-app-id="medical-search-123" onchange="showResult()" title="choose the category which you'll search">
  <!-- 选项不变 -->
</select>

然后在JS里获取这个自定义变量：

function showResult() {
  const selectedCategory = document.getElementById('category').value;
  // 通过dataset获取自定义的data属性值
  const appId = document.getElementById('category').dataset.appId;

  // 现在你就有了category和appId两个变量，可以一起传给后端
  const url = `/your-search-api?category=${encodeURIComponent(selectedCategory)}&appId=${encodeURIComponent(appId)}`;
  // ... 发起请求
}

小提示 #

• 传递参数到后端时，一定要用encodeURIComponent编码，避免特殊字符导致的URL错误或乱码；
• 如果是POST请求，可以把两个变量放在请求体里，而不是URL参数中，安全性和可读性更好；
• 实时搜索通常还会结合输入框的input事件，比如用户输入关键词时也触发搜索，而不只是切换分类时，你可以把搜索逻辑抽成独立函数，让两个事件都调用它。

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