AngularJS $http POST请求数据传递与Go后端接收实践

$scope.changeCategory = function(category_id) {
    $http({
        method : 'POST',
        url : '/changeCategory',
        data : category_id, // 错误：直接传递裸值
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).success(function(data, status, headers, config) {
        // 处理成功响应
    }).error(function(data, status, headers, config) {
        // 处理错误
    });
};

$scope.changeCategory = function(categoryId) {
    // 假设categoryId是从HTML元素中获取的，例如ng-click="changeCategory(page.category_id)"
    $window.alert(categoryId); // 调试用途

    $http({
        method : 'POST',
        url : '/changeCategory',
        // 正确：将数据封装为键值对对象
        data : { 'category_id': categoryId },
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
        // 当Content-Type为application/x-www-form-urlencoded时，
        // AngularJS会将data对象自动序列化为表单数据字符串
    }).success(function(data, status, headers, config) {
        // 请求成功处理
        console.log("Category changed successfully:", data);
    }).error(function(data, status, headers, config) {
        // 请求失败处理
        $scope.status = status;
        $window.alert("Error changing category: " + status);
        console.error("Error details:", data);
    });
};

package main

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

func changeCategoryHandler(w http.ResponseWriter, r *http.Request) {
    // 确保请求方法是POST
    if r.Method != http.MethodPost {
        http.Error(w, "Only POST requests are allowed", http.StatusMethodNotAllowed)
        return
    }

    // 解析表单数据。对于application/x-www-form-urlencoded，Go会自动解析
    // r.ParseForm() 可以在访问r.Form或r.PostForm之前显式调用，
    // 但对于FormValue()通常不是必需的，它会自动处理。
    // r.ParseForm()

    // 获取名为 'category_id' 的表单值
    categoryID := r.FormValue("category_id")
    if categoryID == "" {
        http.Error(w, "category_id parameter is missing", http.StatusBadRequest)
        return
    }

    // 打印接收到的category_id（仅用于演示）
    fmt.Printf("Received category_id: %s\n", categoryID)

    // 在这里可以执行数据库操作或业务逻辑
    // ...

    // 返回成功响应
    w.WriteHeader(http.StatusOK)
    fmt.Fprintf(w, "Category changed to %s successfully!", categoryID)
}

func main() {
    http.HandleFunc("/changeCategory", changeCategoryHandler)
    fmt.Println("Server listening on port 8080...")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

$http({
    method : 'POST',
    url : '/changeCategoryJson',
    data : { 'category_id': categoryId, 'additional_info': 'some value' }, // 依然是对象
    headers : { 'Content-Type': 'application/json' } // 更改Content-Type
}).success(function(data, status, headers, config) {
    // ...
});

import (
    "encoding/json"
    // ...
)

type CategoryRequest struct {
    CategoryID   string `json:"category_id"`
    AdditionalInfo string `json:"additional_info"`
}

func changeCategoryJsonHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != http.MethodPost {
        http.Error(w, "Only POST requests are allowed", http.StatusMethodNotAllowed)
        return
    }

    var reqData CategoryRequest
    // 从请求体中解码JSON
    err := json.NewDecoder(r.Body).Decode(&reqData)
    if err != nil {
        http.Error(w, "Invalid JSON payload", http.StatusBadRequest)
        return
    }

    fmt.Printf("Received category_id (JSON): %s, AdditionalInfo: %s\n", reqData.CategoryID, reqData.AdditionalInfo)
    w.WriteHeader(http.StatusOK)
    fmt.Fprintf(w, "Category (JSON) changed to %s successfully!", reqData.CategoryID)
}