无法展示JSON请求结果，需实现金银价格无刷新显示及默认银价加载

看起来你现在遇到的问题主要是页面加载后无默认请求、选择金属后无响应，我帮你梳理下问题并给出完整的修复代码，核心是确保页面初始化时触发白银请求、绑定选择事件、正确处理API响应并更新页面：

一、完整实现代码（HTML + jQuery） #

HTML 部分 #

<!-- 金属选择器 -->
<select id="metalSelector">
  <option value="silver">白银</option>
  <option value="gold">黄金</option>
</select>

<!-- 价格展示区域 -->
<div id="priceDisplay">加载中...</div>

jQuery/JS 部分 #

(function($) {
  // 配置API信息
  const apiKey = '348e90c9b0fdb1...'; // 替换为你的完整API密钥
  const apiUrl = 'https://your-api-endpoint.com/price'; // 替换为实际API地址

  // 定义获取价格的通用函数
  function fetchMetalPrice(metalType) {
    $.ajax({
      url: apiUrl,
      method: 'GET',
      data: {
        metal: metalType,
        api_key: apiKey
      },
      success: function(response) {
        // 请根据实际API返回的字段调整这里的解析逻辑
        const metalName = metalType === 'silver' ? '白银' : '黄金';
        $('#priceDisplay').text(`当前${metalName}价格：$${response.current_price}`);
      },
      error: function(xhr, status, error) {
        $('#priceDisplay').text('价格加载失败，请稍后重试');
        console.error('API请求错误详情:', error);
      }
    });
  }

  // 页面初始化逻辑
  $(document).ready(function() {
    // 页面加载完成后默认请求白银价格
    fetchMetalPrice('silver');

    // 绑定选择器的切换事件
    $('#metalSelector').on('change', function() {
      const selectedMetal = $(this).val();
      fetchMetalPrice(selectedMetal);
    });
  });
})(jQuery);

二、关键修复点说明 #

• 默认加载白银价格：在$(document).ready()中主动调用fetchMetalPrice('silver')，确保页面一加载就发起请求
• 绑定选择事件：给下拉框添加change事件监听，用户切换选项时立即触发对应金属的价格请求
• 无刷新更新页面：用$.ajax发起异步请求，成功后直接修改#priceDisplay的文本内容，实现无刷新更新
• 错误处理：添加error回调，请求失败时给用户友好提示，同时在控制台打印错误信息方便调试

三、你需要自行调整的细节 #

• 替换apiUrl为你实际使用的API端点地址
• 根据API返回的JSON结构，修改success回调里的响应解析逻辑（比如如果API返回价格字段是response.price，要对应调整）
• 确保页面已经正确引入jQuery库（可以在HTML头部添加<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>）

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