如何将按钮点击调用API返回的JSON响应存储到变量？

没问题，我来帮你搞定这个需求！你已经有了下拉框和jQuery的引入，接下来只需要补全按钮逻辑，并且在API调用时把返回的JSON存到变量里就行。下面是具体的实现步骤和代码：

1. 补全按钮元素 #

先把你没写完的按钮部分补上，比如在下拉框旁边加个触发API调用的按钮：

<div id="dropdown">
  <span class="list">
    <select id="itemList">
      <option value="select">Select</option>
      @foreach (var item in Model) {
        <option value="@item">@item</option>
      }
    </select>
  </span>
  <span>
    <button id="fetchDataBtn">获取API数据</button> <!-- 新增触发按钮 -->
  </span>
</div>

2. 编写API调用逻辑，存储JSON响应 #

接下来用jQuery绑定按钮的点击事件，调用API并把返回的JSON响应存到变量中。这里提供两种常用方式，你可以根据需求选择：

方式一：用$.getJSON（简洁高效，专门处理JSON响应） #

// 定义一个变量来存储API返回的JSON数据，可根据作用域需求调整（比如全局或局部）
let apiResponse = null;

$(document).ready(function() {
  // 绑定按钮点击事件
  $('#fetchDataBtn').click(function() {
    // 获取下拉框选中的选项值
    const selectedItem = $('#itemList').val();
    
    // 先校验是否选择了有效选项
    if (selectedItem === 'select') {
      alert('请先选择一个选项哦！');
      return;
    }
    
    // 调用API，替换成你的实际API地址，可按需传递选中项作为参数
    $.getJSON(`/your-api-url?selectedItem=${selectedItem}`, function(data) {
      // 将返回的JSON数据存入变量
      apiResponse = data;
      
      // 可选：验证存储结果，比如打印到控制台
      console.log('已存储的API响应:', apiResponse);
      alert('JSON数据已成功存入变量！');
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      // 处理API调用失败的情况
      console.error('API请求失败:', textStatus, errorThrown);
      alert('获取数据失败，请稍后重试~');
    });
  });
});

方式二：用$.ajax（更灵活，适合需要自定义请求参数的场景） #

let apiResponse = null;

$(document).ready(function() {
  $('#fetchDataBtn').click(function() {
    const selectedItem = $('#itemList').val();
    
    if (selectedItem === 'select') {
      alert('请先选择一个选项！');
      return;
    }
    
    $.ajax({
      url: '/your-api-url',
      type: 'GET', // 若API要求POST，改为'POST'即可
      data: { selectedItem: selectedItem }, // 传递给API的参数
      dataType: 'json', // 指定响应类型为JSON
      success: function(data) {
        apiResponse = data;
        console.log('已存储的API响应:', apiResponse);
        alert('数据存储成功！');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求出错:', errorThrown);
        alert('请求失败，请检查API地址或网络状态！');
      }
    });
  });
});

关键注意点 #

• 务必把代码中的/your-api-url替换成你实际的API接口地址
• 如果API需要POST请求，记得调整type为POST，若要传递JSON格式的参数，还需添加contentType: 'application/json'并将data转为JSON字符串
• 变量apiResponse的作用域：如果需要在其他函数中使用，要确保它的作用域可访问（比如全局变量，或者在同一个闭包内）
• 一定要处理请求失败的情况，提升用户体验

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