无法正确地将表单序列化为 json-Golang-PHP中文网

问题内容

解决方法

首页

后端开发

Golang

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 14, 2024 pm 08:36 PM

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

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

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

登录后复制

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

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

登录后复制

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

解决方法

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

解决方法🎜🎜请按如下方式更新您的 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);
        }
    });
});

登录后复制

以上是无法正确地将表单序列化为 json的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7722

Java教程

1642

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

显示更多

Related knowledge

Debian OpenSSL有哪些漏洞 Apr 02, 2025 am 07:30 AM

OpenSSL，作为广泛应用于安全通信的开源库，提供了加密算法、密钥和证书管理等功能。然而，其历史版本中存在一些已知安全漏洞，其中一些危害极大。本文将重点介绍Debian系统中OpenSSL的常见漏洞及应对措施。DebianOpenSSL已知漏洞：OpenSSL曾出现过多个严重漏洞，例如：心脏出血漏洞(CVE-2014-0160):该漏洞影响OpenSSL1.0.1至1.0.1f以及1.0.2至1.0.2beta版本。攻击者可利用此漏洞未经授权读取服务器上的敏感信息，包括加密密钥等。

Go语言中用于浮点数运算的库有哪些？ Apr 02, 2025 pm 02:06 PM

Go语言中用于浮点数运算的库介绍在Go语言（也称为Golang）中，进行浮点数的加减乘除运算时，如何确保精度是�...

Go的爬虫Colly中Queue线程的问题是什么？ Apr 02, 2025 pm 02:09 PM

Go爬虫Colly中的Queue线程问题探讨在使用Go语言的Colly爬虫库时，开发者常常会遇到关于线程和请求队列的问题。�...

从前端转型后端开发，学习Java还是Golang更有前景？ Apr 02, 2025 am 09:12 AM

后端学习路径：从前端转型到后端的探索之旅作为一名从前端开发转型的后端初学者，你已经有了nodejs的基础，...

在 Go 语言中，为什么使用 Println 和 string() 函数打印字符串会出现不同的效果？ Apr 02, 2025 pm 02:03 PM

Go语言中字符串打印的区别：使用Println与string()函数的效果差异在Go...

Beego ORM中如何指定模型关联的数据库？ Apr 02, 2025 pm 03:54 PM

在BeegoORM框架下，如何指定模型关联的数据库？许多Beego项目需要同时操作多个数据库。当使用Beego...

Debian下PostgreSQL监控方法 Apr 02, 2025 am 07:27 AM

本文介绍在Debian系统下监控PostgreSQL数据库的多种方法和工具，助您全面掌握数据库性能监控。一、利用PostgreSQL内置监控视图PostgreSQL自身提供多个视图用于监控数据库活动：pg_stat_activity：实时展现数据库活动，包括连接、查询和事务等信息。pg_stat_replication：监控复制状态，尤其适用于流复制集群。pg_stat_database：提供数据库统计信息，例如数据库大小、事务提交/回滚次数等关键指标。二、借助日志分析工具pgBadg