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

聖光之護 2025-08-03 21:02 321浏览原创

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

本文档旨在指导开发者如何使用Go语言搭建简单的HTTP服务器，并通过JavaScript从该服务器读取JSON数据并在客户端展示。我们将详细介绍服务器端的Go代码、客户端的HTML和JavaScript代码，并提供完整的示例，帮助你理解整个流程，解决可能遇到的问题。

1. 服务器端 (Go) 代码

首先，我们需要创建一个Go程序，用于提供静态文件服务，包括HTML页面和JSON数据。

package main

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

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

func main() {
    flag.Parse()

    fs := http.FileServer(http.Dir(*root))
    http.Handle("/", fs)

    log.Printf("Serving %s on HTTP port %s\n", *root, *port)
    log.Fatal(http.ListenAndServe(*port, nil))
}

代码解释:

flag 包用于解析命令行参数，例如指定静态文件根目录和监听端口。
http.FileServer 创建一个文件服务器，用于提供指定目录下的静态文件。
http.Handle("/", fs) 将所有请求都交给文件服务器处理。
http.ListenAndServe(":8080", nil) 启动HTTP服务器，监听 8080 端口。

使用方法:

将上述代码保存为 server.go。
使用 go build server.go 命令编译生成可执行文件 server。
运行 server --root ./static --port :8080，其中 ./static 是存放静态文件的目录。

2. 客户端 (HTML & JavaScript) 代码

接下来，我们需要创建HTML文件和一个JavaScript文件，用于从服务器获取JSON数据并展示在页面上。

getjson.html:

<!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 src="json_data.js"></script>
</head>
<body>
  <button>Get Json Data</button>
  <div></div>
</body>
</html>

json_data.js:

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("data.json", function(result){
      $("div").append(result.firstName + " " + result.lastName + " " + result.age);
    });
  });
});

data.json:

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

代码解释:

getjson.html 包含一个按钮和一个 div 元素，用于显示JSON数据。
json_data.js 使用 jQuery 的 $.getJSON 方法从 data.json 文件获取数据。
data.json 包含JSON数据。

使用方法:

将 getjson.html、json_data.js 和 data.json 放在服务器指定的静态文件目录下 (例如 ./static)。
在浏览器中访问服务器地址 (例如 http://localhost:8080/getjson.html)。
点击 "Get Json Data" 按钮，页面上将显示 JSON 数据。

3. 注意事项

文件路径: 确保 JavaScript 文件中引用的 JSON 文件路径是正确的，相对于 HTML 文件的位置。
跨域问题: 如果 HTML 文件和 JSON 文件不在同一个域名下，可能会出现跨域问题。可以通过设置服务器端的 CORS (Cross-Origin Resource Sharing) 头部来解决。
错误处理: 在实际应用中，应该添加错误处理代码，例如在 $.getJSON 方法中添加 error 回调函数，以便在请求失败时给出提示。
数据格式: 确保 JSON 数据的格式是正确的，否则 JavaScript 代码可能无法正确解析。
服务器配置: 确保服务器正确配置，可以提供静态文件服务。