使用 Go 语言和 JavaScript 读取 JSON 文件：一份详细教程-Golang-PHP中文网

使用 Go 语言和 JavaScript 读取 JSON 文件：一份详细教程

聖光之護

发布： 2025-08-03 20:24:01

原创

699人浏览过

使用 go 语言和 javascript 读取 json 文件：一份详细教程

本文档旨在指导开发者如何使用 Go 语言搭建一个简单的 Web 服务器，并通过 JavaScript 从该服务器读取 JSON 数据。我们将涵盖服务器端的 Go 代码配置、客户端的 HTML 和 JavaScript 代码编写，以及解决常见问题的思路，帮助你构建一个完整的数据交互流程。

服务器端 (Go) 配置

首先，我们需要创建一个 Go 程序来提供 JSON 文件。以下是一个简单的示例，它将 JSON 文件作为静态资源提供服务。

package main

import (
    "flag"
    "log"
    "net/http"
)

var (
    root = flag.String("root", "./", "Set root directory")
    port = flag.String("port", ":8080", "Set port to listen on")
)

func main() {
    flag.Parse()

    // Serve static files from the specified root directory.
    fs := http.FileServer(http.Dir(*root))
    http.Handle("/", fs)

    log.Printf("Serving files from %s on port %s", *root, *port)
    log.Fatal(http.ListenAndServe(*port, nil))
}

登录后复制

使用方法:

将上述代码保存为 server.go 文件。
在命令行中，使用 go run server.go -root ./ 命令运行服务器。这将从当前目录 (./) 提供静态文件，并监听 8080 端口。你可以通过 -port 参数修改端口号。

注意事项:

立即学习“Java免费学习笔记（深入）”；

确保 JSON 文件（例如 data.json）位于你指定的 root 目录下。
Go 语言需要正确安装和配置。

客户端 (HTML 和 JavaScript) 配置

接下来，我们需要一个 HTML 文件来显示一个按钮，并在点击时使用 JavaScript 从服务器获取 JSON 数据。

<!DOCTYPE html>
<html>
<head>
<title>Get JSON Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("data.json", function(result){
      $("div").append(result.firstName + " " + result.lastName + " " + result.age);
    });
  });
});
</script>
</head>
<body>

<button>Get Json Data</button>
<div></div>

</body>
</html>

登录后复制

解释:

MeDo

无代码AI应用开发，百度秒哒海外版

126

查看详情

引入 jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 这行代码引入了 jQuery 库，简化了 AJAX 请求。
事件监听: $("button").click(function(){ ... }); 这行代码监听按钮的点击事件。
发起 AJAX 请求: $.getJSON("data.json", function(result){ ... }); 这行代码使用 jQuery 的 $.getJSON() 方法从 data.json 文件中获取 JSON 数据。
处理响应数据: $("div").append(result.firstName + " " + result.lastName + " " + result.age); 这行代码将 JSON 数据中的 firstName、lastName 和 age 属性的值追加到 <div> 元素中。

JSON 数据示例 (data.json):

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

登录后复制

使用方法:

将上述 HTML 代码保存为 index.html 文件，并将其放置在与 data.json 文件相同的目录下（即 server.go 启动时指定的 -root 目录下）。
在浏览器中打开 index.html 文件。
点击 "Get Json Data" 按钮。你应该在页面上看到 "John Doe 25"。

常见问题及解决方案

无法加载 JSON 文件：
- 问题： 浏览器控制台显示 "Failed to load resource: net::ERR_FILE_NOT_FOUND" 或类似的错误。
- 原因： JSON 文件的路径不正确，或者服务器没有正确提供该文件。
- 解决方案：
  - 确保 HTML 文件中的 $.getJSON() 方法使用的路径与 JSON 文件在服务器上的实际路径匹配。例如，如果 JSON 文件位于 data/data.json，则应使用 $.getJSON("data/data.json", ...)。
  - 检查服务器是否正确配置，以提供静态文件。确保 server.go 中的 -root 参数指向包含 JSON 文件的目录。
CORS 错误：
- 问题： 浏览器控制台显示 "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource..." 或类似的错误。
- 原因： 浏览器阻止了跨域请求，因为 HTML 文件和 JSON 文件来自不同的域名或端口。
- 解决方案：
  - 开发环境： 可以使用浏览器的 CORS 插件来禁用 CORS 检查。
  - 生产环境： 在服务器端配置 CORS 响应头，允许跨域请求。例如，在 Go 中，可以在 http.HandleFunc 中设置 w.Header().Set("Access-Control-Allow-Origin", "*")。 注意： 在生产环境中，应将 "*" 替换为允许访问你的 API 的特定域名，以提高安全性。
JSON 数据解析错误：
- 问题： JavaScript 代码无法正确解析 JSON 数据。
- 原因： JSON 文件的格式不正确。
- 解决方案： 使用 JSON 验证器（例如 https://www.php.cn/link/281bc81fb21d55e267f37af58d79801a）检查 JSON 文件的格式是否正确。

总结

本教程介绍了如何使用 Go 语言搭建一个简单的 Web 服务器，并通过 JavaScript 从该服务器读取 JSON 数据。通过理解服务器端的 Go 代码配置、客户端的 HTML 和 JavaScript 代码编写，以及解决常见问题的思路，你可以构建一个完整的数据交互流程。记住，正确的文件路径、服务器配置和 JSON 格式是成功实现此功能的关键。

以上就是使用 Go 语言和 JavaScript 读取 JSON 文件：一份详细教程的详细内容，更多请关注php中文网其它相关文章！