如何在 Go 后端与 Ajax 前端间正确传递多维数组或结构体数据

轻伟君_3846

轻伟君_3846

2026-06-28

429人浏览

原创

如何在 Go 后端与 Ajax 前端间正确传递多维数组或结构体数据

本文详解如何在 beego(或标准 net/http)框架中,将 go 的切片、结构体等复合数据安全序列化为合法 json,并通过 ajax 正确解析为 javascript 数组或对象,避免因拼接字符串导致的 json 格式错误。

本文详解如何在 beego(或标准 net/http)框架中,将 go 的切片、结构体等复合数据安全序列化为合法 json,并通过 ajax 正确解析为 javascript 数组或对象,避免因拼接字符串导致的 json 格式错误。

在 Web 开发中,Go 后端常需向前端返回多个数据集合(如两个字符串切片)或结构化数据(如用户信息 + 权限列表)。初学者易犯的典型错误是:分别序列化多个 slice 并连续写入响应体,例如:

b, _ := json.Marshal(aSlice)
c, _ := json.Marshal(bSlice)
this.Ctx.ResponseWriter.Write(b) // 写入 ["a","b"]
this.Ctx.ResponseWriter.Write(c) // 紧接着写入 ["x","y"] → 结果变为 ["a","b"]["x","y"]

这会生成非法 JSON —— 两个独立的 JSON 数组被简单拼接,不符合 JSON 规范(JSON 文档必须且仅有一个根值),导致浏览器解析失败,Ajax 请求触发 error 回调而非 success。

✅ 正确做法是:将多个数据统一封装为一个合法 JSON 结构再整体序列化。常见方案如下:

Json Schema Toolkit
Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

✅ 方案一:返回嵌套数组(适用于同类型多 slice)

aSlice := []string{"foo", "bar"}
bSlice := []string{"baz", "qux"}

// 将切片组合为二维切片(推荐强类型)
result := [][]string{aSlice, bSlice}
data, err := json.Marshal(result)
if err != nil {
    http.Error(this.Ctx.ResponseWriter, err.Error(), http.StatusInternalServerError)
    return
}
this.Ctx.ResponseWriter.Header().Set("Content-Type", "application/json")
this.Ctx.ResponseWriter.Write(data)

对应前端 Ajax 需明确声明 dataType: 'json':

$.ajax({
    url: '/delete_process',
    type: 'POST',
    dataType: 'json', // 关键:告知 jQuery 自动解析 JSON
    data: { processName: processName }, // 推荐使用对象而非字符串拼接
    success: function(data) {
        console.log(data);        // [["foo","bar"], ["baz","qux"]]
        console.log(data[0]);     // ["foo","bar"]
        console.log(data[1][0]);  // "baz"
    },
    error: function(xhr) {
        console.error('JSON 解析失败或服务器错误:', xhr.responseText);
    }
});

✅ 方案二:返回结构体(适用于异构数据,语义清晰)

type Response struct {
    Users    []string `json:"users"`
    Roles    []string `json:"roles"`
    Count    int      `json:"count"`
}

resp := Response{
    Users: []string{"alice", "bob"},
    Roles: []string{"admin", "editor"},
    Count: 2,
}
data, _ := json.Marshal(resp)
this.Ctx.ResponseWriter.Header().Set("Content-Type", "application/json")
this.Ctx.ResponseWriter.Write(data)

前端可直接按字段访问:

success: function(data) {
    console.log(data.users);   // ["alice", "bob"]
    console.log(data.roles);   // ["admin", "editor"]
    console.log(data.count);   // 2
}

⚠️ 关键注意事项

  • dataType 必须设为 'json':否则 jQuery 不会自动解析,data 将是原始字符串。
  • 禁止手动拼接 JSON 字符串:Write() 多次会破坏 JSON 完整性,务必一次性输出完整结构。
  • 设置响应头:显式添加 Content-Type: application/json 提升兼容性与调试体验。
  • 数据校验与错误处理:json.Marshal() 可能失败(如含不可序列化字段),生产环境需检查 err。
  • 前端传参建议用对象:data: { processName: processName } 比 data: "&processName=" + ... 更安全、更符合规范。

通过合理封装数据结构并严格遵循 JSON 规范,即可在 Go 与前端间高效、可靠地传输复杂数据,彻底规避“接收为字符串而非数组”的常见陷阱。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2203

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5850

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5166

10

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2203

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4723

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5850

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5318

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

763

5

Golang 入门学习路线:从零基础到上手开发
Golang 入门学习路线:从零基础到上手开发

Golang 入门路线涵盖从零到上手的核心路径:首先打牢基础语法与切片等底层机制;随后攻克 Go 的灵魂——接口设计与 Goroutine 并发模型;接着通过 Gin 框架与 GORM 深入 Web 开发实战;最后在微服务与云原生工具开发中进阶,旨在培养具备高性能并发处理能力的后端工程师。

2026.02.24

206

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程