php小编香蕉为您介绍一种常见问题：无法正确地将表单序列化为json。在开发中，我们经常需要将表单数据以json格式传递给后端处理。然而，有时候我们会遇到一些问题，比如提交的数据无法正确地转换成json格式。这可能是由于表单中包含了特殊字符或格式不正确导致的。在本文中，我们将探讨一些常见的原因和解决方案，帮助您解决这个问题，确保表单数据正确地序列化为json。

问题内容

我正在尝试在 golang 中创建一个 web 应用程序，允许您将收据的详细信息输入到不同的表单中，然后这些表单输入被序列化为 json 对象。但是，我在序列化表单时遇到了麻烦，因为每当我尝试“提交”收据时，都会收到错误消息。

这是 main.go

package main

import (
    "encoding/json"
    "html/template"
    "log"
    "net/http"
    "strconv"

    "github.com/gorilla/mux"
)

type item struct {
    shortdescription string `json:"shortdescription"`
    price            string `json:"price"`
}

type receipt struct {
    retailer     string `json:"retailer"`
    purchasedate string `json:"purchasedate"`
    purchasetime string `json:"purchasetime"`
    items        []item `json:"items"`
    total        string `json:"total"`
    receiptid    int    `json:"receiptid"`
}

var receiptidcounter int

var receipts = make(map[int]receipt)

func main() {
    r := mux.newrouter()

    r.handlefunc("/", homehandler).methods("get")
    r.handlefunc("/submit", submithandler).methods("post")
    r.handlefunc("/receipt/{id}", receipthandler).methods("get")

    http.handle("/", r)

    log.fatal(http.listenandserve(":8080", nil))
}

func homehandler(w http.responsewriter, r *http.request) {
    t, err := template.parsefiles("templates/home.html")
    if err != nil {
        log.println(err)
        http.error(w, "internal server error", http.statusinternalservererror)
        return
    }

    err = t.execute(w, nil)
    if err != nil {
        log.println(err)
        http.error(w, "internal server error", http.statusinternalservererror)
    }
}

func submithandler(w http.responsewriter, r *http.request) {
    decoder := json.newdecoder(r.body)

    var receipt receipt
    err := decoder.decode(&receipt)
    if err != nil {
        log.println(err)
        http.error(w, "bad request", http.statusbadrequest)
        return
    }

    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)
}

func receipthandler(w http.responsewriter, r *http.request) {
    vars := mux.vars(r)
    id, err := strconv.atoi(vars["id"])
    if err != nil {
        log.println(err)
        http.error(w, "bad request", http.statusbadrequest)
        return
    }

    receipt, exists := receipts[id]
    if !exists {
        http.notfound(w, r)
        return
    }

    t, err := template.parsefiles("templates/receipt.html")
    if err != nil {
        log.println(err)
        http.error(w, "internal server error", http.statusinternalservererror)
        return
    }

    err = t.execute(w, receipt)
    if err != nil {
        log.println(err)
        http.error(w, "internal server error", http.statusinternalservererror)
    }
}

这是我的 home.html，这是我主页的 html

MOKI

MOKI是美图推出的一款AI短片创作工具，旨在通过AI技术自动生成分镜图并转为视频素材。

下载

    
    
    


    
receipt input form
    

        retailer:
        


        
        purchase date:
        


        
        purchase time:
        


        
        

            

                short description:
                
                
                price:
                
            
        
        add item


        
        total:
        


        
        submit
    

    

这是我的receipt.html，这是提交收据后的收据页面的html。

    
    


    
Receipt Details
    

        
Retailer: {{.Retailer}}
        
Purchase Date: {{.PurchaseDate}}
        
Purchase Time: {{.PurchaseTime}}
        
Items:
        

            {{range .Items}}
            
{{.ShortDescription}} - {{.Price}}
            {{end}}
        
        
Total: {{.Total}}
    

我尝试了不同的序列化方法，但没有任何效果。当我填写收据表格然后点击提交时，我希望我会进入收据页面，显示该收据的独特详细信息。但是我刚刚收到一个错误，我最近的一个错误是这样的： in无效字符“r”寻找值的开头

解决方法

请按如下方式更新您的 home.html。我将提交请求内容类型更改为 application/json 因为服务器中的 submithandler 正在寻找 json。

$('#receipt-form').submit(function(event) {
    event.preventDefault();
    
    var form = $(this).serializeArray();

    var formObject = {};
    $.each(form,
        function(i, v) {
            if (v.name != "price[]" && v.name != "shortDescription[]") {
                formObject[v.name] = v.value;
            }
        });

    var items = [];
    $('.item').each(function() {
        var item = {};
        item.shortDescription = $(this).find('input[name="shortDescription[]"]').val();
        item.price = $(this).find('input[name="price[]"]').val();
        items.push(item);
    });

    formObject["items"] = items;

    $.ajax({
        type: "POST",
        url: "/submit",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(formObject),
        success: function(response) {
            window.location.href = "/receipt?id=" + response.receiptID;
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});