Tidak dapat mensirikan borang dengan betul kepada json-Golang-php.cn

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

PHP Editor Banana akan memperkenalkan anda kepada masalah biasa: borang tidak boleh bersiri ke json dengan betul. Dalam pembangunan, kita selalunya perlu menghantar data borang ke bahagian belakang untuk diproses dalam format json. Walau bagaimanapun, kadangkala kami menghadapi beberapa masalah, seperti data yang diserahkan tidak boleh ditukar dengan betul ke dalam format json. Ini mungkin disebabkan oleh aksara khas dalam bentuk atau pemformatan yang salah. Dalam artikel ini, kami akan meneroka beberapa punca dan penyelesaian biasa untuk membantu anda menyelesaikan masalah ini dan memastikan data borang disirikan ke json dengan betul.

Kandungan soalan

Saya cuba mencipta aplikasi web dalam golang yang membolehkan anda memasukkan butiran resit ke dalam bentuk yang berbeza, dan kemudian input borang ini disirikan ke dalam objek json. Walau bagaimanapun, saya menghadapi masalah untuk mensiri borang kerana setiap kali saya cuba "menyerahkan" resit, saya mendapat mesej ralat.

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

Salin selepas log masuk

Ini rumah saya.html, ini adalah html halaman utama saya

<!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>

Salin selepas log masuk

Ini resit saya.html, ini adalah html halaman resit selepas menyerahkan resit.

<!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>

Salin selepas log masuk

Saya mencuba kaedah bersiri yang berbeza tetapi tiada apa yang berkesan. Apabila saya mengisi borang resit dan klik hantar, saya menjangkakan bahawa saya akan dibawa ke halaman resit yang menunjukkan butiran unik resit tersebut. Tetapi saya baru sahaja mendapat ralat, ralat terbaru saya ialah ini: aksara "r" tidak sah mencari permulaan nilaiin无效字符“r”寻找值的开头

解决方法

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

Penyelesaian🎜🎜Sila kemas kini home.html anda seperti berikut. Saya menukar jenis kandungan permintaan serah kepada application/json kerana submithandler dalam pelayan sedang mencari 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);
        }
    });
});

Salin selepas log masuk

Atas ialah kandungan terperinci Tidak dapat mensirikan borang dengan betul kepada json. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!