Golang 的瀏覽器支援：建立互動式 Web

Go建立互動式網頁應用程序，在瀏覽器中運行。步驟：建立Go專案和main.go文件，新增HTTP處理程序以顯示訊息。使用HTML和JavaScript新增表單，用於使用者輸入和提交。在Go應用程式中加入對POST請求的處理，接收用戶訊息並回傳回應。使用Fetch API發送POST請求並處理伺服器回應。

使用 Go 建立互動式 Web 應用程式：瀏覽器支援

Go 是一個多功能程式語言，不僅限於後端開發。在本文中，我們將展示如何使用 Go 輕鬆建立互動式 Web 應用程序，以在瀏覽器中執行。

建立Go Web 應用程式

首先，建立一個新的Go 專案：

go mod init myapp

接下來，建立一個名為main.go 的檔案並新增以下程式碼：

package main

import (
    "fmt"
    "net/http"
)

func main() {
    // 定义一个处理程序函数，它将在浏览器中渲染一个简单的消息
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello from Go!")
    })

    // 启动 HTTP 服务器侦听端口 8080 上的请求
    http.ListenAndServe(":8080", nil)
}

瀏覽Web 應用程式

使用以下命令執行Go 應用程式：

go run main.go

然後，在瀏覽器中開啟http: //localhost:8080。你應該會看到 "Hello from Go!" 訊息顯示在頁面上。

新增互動性

要加入互動性，我們可以使用 HTML 和 JavaScript。將以下內容新增至main.go 檔案中，在http.HandleFunc 閉包內：

    // 创建一个简单表单，包含一个输入字段和一个提交按钮
    fmt.Fprintf(w, "<form method='POST'><input type='text' name='message'/><input type='submit' value='Send'/></form>")

這將在頁面上建立表單，使用者可以在其中輸入訊息並按"Send" 按鈕提交。

接下來，加入以下JavaScript 程式碼到HTML 頁面的底部，在f5a47148e367a6035fd7a2faa965022e 標籤之後：

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = e.target.querySelector('input[name="message"]').value;

    // 使用 Fetch API 发送 POST 请求
    fetch('/', {
        method: 'POST',
        body: JSON.stringify({ message }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        // 处理服务器响应
        console.log(data);
    })
    .catch(error => {
        // 处理错误
        console.log(error);
    });
});

這個JavaScript 程式碼會監聽表單的提交，收集用戶輸入的訊息，並使用Fetch API 發送POST 請求到Go 伺服器。

在 Go 應用程式中，添加以下程式碼來處理 POST 請求：

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if r.Method == "POST" {
            // 解析 JSON 请求正文
            var msg Message
            decoder := json.NewDecoder(r.Body)
            if err := decoder.Decode(&msg); err != nil {
                http.Error(w, err.Error(), http.StatusBadRequest)
                return
            }

            // 处理消息并返回响应
            fmt.Fprintf(w, "Got your message: %s", msg.Message)
        } else {
            // 处理其他请求方法
        }
    })

    // 定义一个用于保存消息的类型
    type Message struct {
        Message string `json:"message"`
    }

    http.ListenAndServe(":8080", nil)
}

透過這些更改，我們的 Web 應用程式現在可以接收使用者的輸入並向其顯示回應。

結論

使用 Go 建立互動式 Web 應用程式既簡單又強大。透過結合 Go 的後端處理能力以及 HTML 和 JavaScript 的前端功能，你可以創造豐富的使用者體驗，直接在瀏覽器中運作。

以上是Golang 的瀏覽器支援：建立互動式 Web的詳細內容。更多資訊請關注PHP中文網其他相關文章！