Go语言收据表单无法序列化为JSON的问题求助

问题核心 #

提交收据时出现错误 invalid character 'r' looking for beginning of value，且无法跳转到收据详情页。

错误原因 #

1. 数据格式不兼容：前端通过AJAX发送的是application/x-www-form-urlencoded格式的表单数据，但后端submitHandler使用json.NewDecoder尝试解析JSON，导致解码失败。
2. 路由匹配失败：后端定义的详情页路由是/receipt/{id}（路径参数），但前端跳转时使用/receipt?id=（查询参数），无法匹配到对应的处理函数。

修复方案 #

方案一：后端适配表单数据（无需大幅修改前端） #

修改main.go中的submitHandler函数，改为解析表单数据：

func submitHandler(w http.ResponseWriter, r *http.Request) {
    // 解析表单数据
    err := r.ParseForm()
    if err != nil {
        log.Println(err)
        http.Error(w, "Bad request", http.StatusBadRequest)
        return
    }

    // 解析Items数组的JSON字符串
    var items []Item
    itemsJSON := r.FormValue("items")
    err = json.Unmarshal([]byte(itemsJSON), &items)
    if err != nil {
        log.Println(err)
        http.Error(w, "Bad request", http.StatusBadRequest)
        return
    }

    // 构建Receipt对象
    receipt := Receipt{
        Retailer:     r.FormValue("retailer"),
        PurchaseDate: r.FormValue("purchaseDate"),
        PurchaseTime: r.FormValue("purchaseTime"),
        Total:        r.FormValue("total"),
        Items:        items,
    }

    receiptIDCounter++
    receipt.ReceiptID = receiptIDCounter
    receipts[receipt.ReceiptID] = receipt

    jsonResponse, err := json.Marshal(map[string]int{"receiptID": receipt.ReceiptID})
    if err != nil {
        log.Println(err)
        http.Error(w, "Internal server error", http.StatusInternalServerError)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(jsonResponse)
}

方案二：前端发送JSON数据（保持后端JSON解析逻辑） #

修改home.html中的AJAX提交逻辑，改为发送JSON格式数据，并修正跳转路径：

$('#receipt-form').submit(function(event) {
    event.preventDefault();
    // 构建完整的收据JSON对象
    var receiptData = {
        retailer: $('input[name="retailer"]').val(),
        purchaseDate: $('input[name="purchaseDate"]').val(),
        purchaseTime: $('input[name="purchaseTime"]').val(),
        total: $('input[name="total"]').val(),
        items: []
    };
    // 遍历收集商品项
    $('.item').each(function() {
        receiptData.items.push({
            shortDescription: $(this).find('input[name="shortDescription[]"]').val(),
            price: $(this).find('input[name="price[]"]').val()
        });
    });
    $.ajax({
        type: "POST",
        url: "/submit",
        contentType: "application/json", // 指定请求内容类型为JSON
        data: JSON.stringify(receiptData), // 转为JSON字符串发送
        success: function(response) {
            // 修正跳转路径为路径参数形式
            window.location.href = "/receipt/" + response.receiptID;
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});

通用修复：修正跳转路径 #

无论采用哪种方案，都需要将前端跳转代码中的/receipt?id=改为/receipt/，以匹配后端的路径参数路由。

内容的提问来源于stack exchange，提问作者cad545