Home > Article > Backend Development > Unable to properly serialize form to json

Unable to properly serialize form to json

WBOYforward: 2024-02-14 20:36:10583browse

无法正确地将表单序列化为 json

php editor Banana introduces you to a common problem: the form cannot be serialized to json correctly. In development, we often need to pass form data to the backend for processing in json format. However, sometimes we encounter some problems, such as the submitted data cannot be correctly converted into json format. This may be caused by special characters in the form or incorrect formatting. In this article, we will explore some common causes and solutions to help you solve this problem and ensure that form data is serialized to json correctly.

Question content

I'm trying to create a web application in golang that allows you to enter receipt details into different forms, and then these form inputs are serialized into json objects . However, I'm having trouble serializing the form because every time I try to "submit" the receipt, I get an error message.

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

This is my home.html, this is the html of my homepage

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>receipt input form</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>receipt input form</h1>
    <form id="receipt-form">
        <label>retailer:</label>
        <input type="text" name="retailer" required><br><br>
        
        <label>purchase date:</label>
        <input type="date" name="purchasedate" required><br><br>
        
        <label>purchase time:</label>
        <input type="time" name="purchasetime" required><br><br>
        
        <div id="items">
            <div class="item">
                <label>short description:</label>
                <input type="text" name="shortdescription[]" required>
                
                <label>price:</label>
                <input type="number" name="price[]" step="0.01" min="0" required>
            </div>
        </div>
        <button type="button" id="add-item-btn">add item</button><br><br>
        
        <label>total:</label>
        <input type="number" name="total" step="0.01" min="0" required><br><br>
        
        <button type="submit">submit</button>
    </form>

    <script>
        $(document).ready(function() {
            var itemcount = 1;
            $('#add-item-btn').click(function() {
                itemcount++;
                var newitem = '<div class="item"><label>short description:</label>' +
                    '<input type="text" name="shortdescription[]" required>' +
                    '<label>price:</label>' +
                    '<input type="number" name="price[]" step="0.01" min="0" required>' +
                    '<button type="button" class="remove-item-btn">remove item</button>' +
                    '</div>';
                $('#items').append(newitem);
            });
            
            $(document).on('click', '.remove-item-btn', function() {
                $(this).parent().remove();
                itemcount--;
            });
            
            $('#receipt-form').submit(function(event) {
                event.preventdefault();
                var form = $(this).serializearray();
                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);
                });
                form.push({ name: "items", value: json.stringify(items) });
                $.ajax({
                    type: "post",
                    url: "/submit",
                    data: form,
                    success: function(response) {
                        window.location.href = "/receipt?id=" + response.receiptid;
                    },
                    error: function(xhr, status, error) {
                        console.log(xhr.responsetext);
                    }
                });
            });
        });
    </script>
</body>
</html>

This is my receipt.html, this is the html of the receipt page after submitting the receipt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Receipt Details</title>
</head>
<body>
    <h1>Receipt Details</h1>
    <ul>
        <li>Retailer: {{.Retailer}}</li>
        <li>Purchase Date: {{.PurchaseDate}}</li>
        <li>Purchase Time: {{.PurchaseTime}}</li>
        <li>Items:</li>
        <ul>
            {{range .Items}}
            <li>{{.ShortDescription}} - {{.Price}}</li>
            {{end}}
        </ul>
        <li>Total: {{.Total}}</li>
    </ul>
</body>
</html>

I tried different serialization methods but nothing worked. When I fill out the receipt form and click submit, I expect that I will be taken to the receipt page that displays the unique details of that receipt. But I just got an error, my most recent error was this: inInvalid character "r" looking for beginning of value

Workaround

Please update your home.html as follows. I changed the submit request content type to application/json because the submithandler in the server is looking for 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);
        }
    });
});

The above is the detailed content of Unable to properly serialize form to json. For more information, please follow other related articles on the PHP Chinese website!

php golang json html 对象

Statement：

This article is reproduced at:stackoverflow.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Do I need to unlock it before broadcasting?Next article：Do I need to unlock it before broadcasting?

See more

Unable to properly serialize form to json

Question content

Workaround

Related articles