使用jQuery调用API获取JSON填充下拉列表失败问题排查

我之前也碰到过类似的情况，明明API返回的JSON是有效的，但下拉列表就是只显示默认提示。咱们一步步来排查解决：

1. 先给AJAX请求加上错误调试 #

你大概率没加错误回调，根本不知道请求哪里出问题了。先给你的populateWF函数加上错误处理，看看控制台的报错信息：

function populateWF() {
  var $wfSelect = $('#你的下拉列表ID'); // 替换成实际的ID
  
  $.ajax({
    url: '/你的API地址', // 比如 '/api/workflows'
    dataType: 'json',
    success: function(data) {
      // 这里是填充逻辑，后面再说
    },
    error: function(xhr, status, error) {
      console.error('请求API出错:', status, error);
      console.log('API返回的原始内容:', xhr.responseText);
    }
  });
}

打开浏览器控制台（F12），调用这个函数后看看有没有报错——比如跨域、路径错误、JSON解析失败之类的，这是最关键的一步。

2. 检查API的响应头和格式 #

直接访问API能看到合法JSON，但还要确认Go脚本有没有设置正确的响应头：

• Go端必须设置Content-Type: application/json，否则jQuery可能把响应当成普通文本，没法自动解析成JSON对象。
• 示例Go代码：

func workflowListHandler(w http.ResponseWriter, r *http.Request) {
  // 模拟返回的数组
  workflows := []struct {
    Name        string `json:"name"`
    Description string `json:"description"`
  }{
    {"daily_report", "每日生成报表"},
    {"data_sync", "跨系统数据同步"},
  }
  
  // 必须设置这个响应头！
  w.Header().Set("Content-Type", "application/json")
  json.NewEncoder(w).Encode(workflows)
}

另外要注意JSON字段名的大小写——Go结构体的json标签必须和你jQuery里用的name、description完全一致，不然会拿到undefined。

3. 修正下拉列表的填充逻辑 #

假设API返回的是正确的数组，那填充逻辑可能有问题。比如有没有清空旧选项？有没有正确遍历数组？
完善后的填充逻辑示例：

function populateWF() {
  var $wfSelect = $('#你的下拉列表ID');
  
  // 保留默认提示选项，清空其他已加载的选项
  $wfSelect.find('option:not(:first)').remove();
  
  $.ajax({
    url: '/你的API地址',
    dataType: 'json',
    success: function(workflows) {
      // 遍历API返回的每个工作流对象
      $.each(workflows, function(index, workflow) {
        // 创建新选项：value用name，显示文本用description（可根据需求调整）
        var $option = $('<option>').val(workflow.name).text(workflow.description);
        $wfSelect.append($option);
      });
    },
    error: function(xhr, status, error) {
      console.error('加载工作流失败:', status, error);
      alert('无法加载工作流列表，请稍后重试');
    }
  });
}

4. 排查跨域问题 #

如果你的前端页面和API不在同一个域名/端口下（比如前端在localhost:3000，API在localhost:8080），会触发浏览器的跨域限制。这时候需要在Go端配置CORS：
添加一个CORS中间件：

func corsMiddleware(next http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    // 生产环境不要用*，替换成你的前端域名，比如 "http://localhost:3000"
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    
    // 处理OPTIONS预检请求
    if r.Method == http.MethodOptions {
      w.WriteHeader(http.StatusOK)
      return
    }
    
    next.ServeHTTP(w, r)
  })
}

然后把这个中间件应用到你的API路由上，比如：

http.Handle("/api/workflows", corsMiddleware(http.HandlerFunc(workflowListHandler)))

按这个步骤排查下来，基本就能解决问题了。先看控制台的错误信息，再针对性处理~

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