如何将HTML表单的TYPES字段值传入Axios GET请求？

嘿，我懂你的痛点！你已经把表单和PHP接口都弄好了，就是卡在把下拉框的选中值传到Axios的GET请求里。别慌，这几步就能搞定：

1. 确认你的HTML结构（如果还没调整好） #

先确保你的下拉框和按钮是这样的（如果已经有了就跳过，重点是下拉框的id必须是TYPES，按钮绑定findimages()）：

<!-- 下拉选择框 -->
<select id="TYPES">
  <option value="nature">自然</option>
  <option value="city">城市</option>
  <option value="animal">动物</option>
</select>

<!-- 触发搜索的按钮 -->
<button onclick="findimages()">搜索图片</button>

2. 改造JavaScript部分，把选中值传给Axios #

原来的fetchImages函数需要改成能接收参数的形式，然后我们在findimages函数里获取下拉框的选中值，再传给它：

// 按钮点击时执行的函数：获取选中值并触发请求
function findimages() {
  // 拿到下拉框元素
  const typeSelectElement = document.getElementById('TYPES');
  // 获取用户选中的选项值
  const selectedCategory = typeSelectElement.value;
  
  // 把选中值传给Axios请求函数
  fetchImages(selectedCategory);
}

// 修改后的Axios请求函数，接受分类参数
function fetchImages(category) {
  // 用模板字符串动态拼接URL，把category替换到cat参数位置
  axios.get(`example.com/getimages.php?cat=${category}`)
    .then(function (response) {
      // 请求成功后的处理，比如把返回的图片渲染到页面
      console.log('请求成功，返回的图片数据：', response.data);
      // 这里可以加你的渲染逻辑，比如循环创建img标签之类的
    })
    .catch(function (error) {
      // 请求失败时的错误处理
      console.error('请求出错啦：', error);
    });
}

核心逻辑解释 #

• 获取选中值：document.getElementById('TYPES').value是关键，它能直接拿到下拉框当前选中的选项值，不管用户选了哪个，这个值都会实时更新。
• 动态拼接URL：用模板字符串（就是用反引号`包裹的字符串）来拼接URL，里面的${category}会自动替换成传入的选中值，比传统的"example.com/getimages.php?cat=" + category更清晰不易出错。
• 触发流程：点击按钮→执行findimages()→拿到选中值→调用fetchImages()发起带参数的Axios请求，完美衔接！

这样改完之后，你点击搜索按钮时，Axios就会带着用户选中的分类值去请求你的PHP接口，和你手动在URL里替换TYPES的效果完全一样～

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