如何通过AJAX从Golang代码获取数据？表单检索结果仅显示在终端求助

嘿，我猜你遇到的问题是：后端能成功从MongoDB查到数据并在Ubuntu终端打印，但前端就是拿不到结果对吧？这十有八九是因为你的检索接口只做了终端输出，没把查到的数据通过HTTP响应返回给前端。我来帮你一步步解决这个问题：

1. 修复后端接口的响应逻辑 #

首先检查你的检索接口代码，是不是只做了fmt.Println打印数据，却没给前端返回内容？比如原来的代码可能是这样：

func getUserByEmail(w http.ResponseWriter, r *http.Request) {
    email := r.FormValue("email")
    var user User
    err := collection.FindOne(context.TODO(), bson.M{"email": email}).Decode(&user)
    if err != nil {
        fmt.Println("查找用户出错：", err)
        return
    }
    fmt.Println("找到用户：", user) // 仅在终端打印，前端啥也拿不到
}

你需要修改代码，把查到的数据编码成JSON返回给前端，同时设置正确的响应头：

import (
    "encoding/json"
    "net/http"
    "context"
    "go.mongodb.org/mongo-driver/bson"
)

// 假设你的User结构体是这样的
type User struct {
    FirstName string `bson:"firstname" json:"firstname"`
    Email     string `bson:"email" json:"email"`
    // 其他字段...
}

func getUserByEmail(w http.ResponseWriter, r *http.Request) {
    // 告诉前端响应是JSON格式
    w.Header().Set("Content-Type", "application/json")

    email := r.FormValue("email")
    var user User
    err := collection.FindOne(context.TODO(), bson.M{"email": email}).Decode(&user)
    
    if err != nil {
        // 如果没找到用户，返回404和错误信息
        w.WriteHeader(http.StatusNotFound)
        json.NewEncoder(w).Encode(map[string]string{"error": "未找到该用户"})
        fmt.Println("查找用户出错：", err)
        return
    }

    // 把用户数据编码成JSON返回给前端
    json.NewEncoder(w).Encode(user)
    fmt.Println("找到用户：", user) // 终端打印可以保留，方便调试
}

2. 让前端正确处理响应 #

如果前端还是没拿到数据，要检查表单提交的方式。传统的表单提交会刷新页面，可能看不到返回的数据，建议用JavaScript异步提交：

<form id="form1" onsubmit="handleSearch(event)">
    <input type="email" id="email" name="email" placeholder="输入邮箱搜索">
    <button type="submit">搜索用户</button>
</form>
<!-- 用来展示结果的容器 -->
<div id="searchResult"></div>

<script>
async function handleSearch(e) {
    e.preventDefault(); // 阻止表单默认提交行为（避免页面刷新）
    const email = document.getElementById('email').value;

    try {
        const response = await fetch('/get-user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `email=${encodeURIComponent(email)}` // 编码邮箱参数
        });

        const data = await response.json();
        
        if (data.error) {
            // 显示错误信息
            document.getElementById('searchResult').textContent = data.error;
        } else {
            // 展示用户数据
            document.getElementById('searchResult').innerHTML = `
                <h3>用户信息</h3>
                <p>姓名：${data.firstname}</p>
                <p>邮箱：${data.email}</p>
                <!-- 根据你的User结构体添加其他字段 -->
            `;
        }
    } catch (err) {
        document.getElementById('searchResult').textContent = '获取数据失败，请稍后重试';
    }
}
</script>

3. 其他需要注意的细节 #

• 路由映射：确保你在Golang中正确把/get-user路径映射到getUserByEmail函数，比如：

  func main() {
      // 初始化MongoDB连接...
      http.HandleFunc("/get-user", getUserByEmail)
      http.ListenAndServe(":8080", nil)
  }
  

• 字段匹配：检查MongoDB中存储的字段名和你的查询条件是否一致（比如是email还是Email，大小写敏感）
• 跨域问题：如果前端和后端不在同一域名/端口下，需要添加CORS中间件允许跨域请求：

  func corsMiddleware(next http.Handler) http.Handler {
      return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
          w.Header().Set("Access-Control-Allow-Origin", "*") // 生产环境建议指定具体域名
          w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
          w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
          
          if r.Method == "OPTIONS" {
              w.WriteHeader(http.StatusOK)
              return
          }
          
          next.ServeHTTP(w, r)
      })
  }
  
  // 使用中间件
  http.Handle("/get-user", corsMiddleware(http.HandlerFunc(getUserByEmail)))
  

按照这些步骤修改后，前端应该就能拿到并展示检索到的用户数据了！

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