Das Formular kann nicht ordnungsgemäß in JSON serialisiert werden
Der PHP-Editor Banana stellt Sie vor ein häufiges Problem: Das Formular kann nicht korrekt in JSON serialisiert werden. In der Entwicklung müssen wir häufig Formulardaten zur Verarbeitung im JSON-Format an das Backend übergeben. Manchmal stoßen wir jedoch auf einige Probleme, z. B. können die übermittelten Daten nicht korrekt in das JSON-Format konvertiert werden. Dies kann durch Sonderzeichen im Formular oder eine falsche Formatierung verursacht werden. In diesem Artikel untersuchen wir einige häufige Ursachen und Lösungen, um Ihnen bei der Lösung dieses Problems zu helfen und sicherzustellen, dass Formulardaten korrekt in JSON serialisiert werden.
Frageninhalt
Ich versuche, eine Webanwendung in Golang zu erstellen, mit der Sie Belegdetails in verschiedene Formulare eingeben und diese Formulareingaben dann in JSON-Objekte serialisieren können. Ich habe jedoch Probleme bei der Serialisierung des Formulars, da ich jedes Mal, wenn ich versuche, die Quittung zu „senden“, eine Fehlermeldung erhalte.
Das ist 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)
}
}Das ist mein home.html, das ist das HTML meiner 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>Dies ist meine Quittung.html, dies ist die HTML-Seite der Quittung nach dem Absenden der Quittung.
<!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>Ich habe verschiedene Serialisierungsmethoden ausprobiert, aber nichts funktioniert. Wenn ich das Quittungsformular ausfülle und auf „Senden“ klicke, erwarte ich, dass ich zur Quittungsseite weitergeleitet werde, auf der die eindeutigen Details dieser Quittung angezeigt werden. Aber ich habe gerade einen Fehler erhalten. Mein letzter Fehler war dieser:
inUngültiges Zeichen „r“ sucht nach Wertanfangin无效字符“r”寻找值的开头
解决方法
请按如下方式更新您的 home.html。我将提交请求内容类型更改为 application/json 因为服务器中的 submithandler 正在寻找 json
home.html wie folgt. Ich habe den Inhaltstyp der Übermittlungsanforderung in application/json geändert, weil der submithandler auf dem Server nach json gesucht hat. 🎜
$('#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);
}
});
});
Das obige ist der detaillierte Inhalt vonDas Formular kann nicht ordnungsgemäß in JSON serialisiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1207
24
Was sind die Schwachstellen von Debian Openensl
Apr 02, 2025 am 07:30 AM
OpenSSL bietet als Open -Source -Bibliothek, die in der sicheren Kommunikation weit verbreitet sind, Verschlüsselungsalgorithmen, Tasten und Zertifikatverwaltungsfunktionen. In seiner historischen Version sind jedoch einige Sicherheitslücken bekannt, von denen einige äußerst schädlich sind. Dieser Artikel konzentriert sich auf gemeinsame Schwachstellen und Antwortmaßnahmen für OpenSSL in Debian -Systemen. DebianopensL Bekannte Schwachstellen: OpenSSL hat mehrere schwerwiegende Schwachstellen erlebt, wie z. Ein Angreifer kann diese Sicherheitsanfälligkeit für nicht autorisierte Lesen sensibler Informationen auf dem Server verwenden, einschließlich Verschlüsselungsschlüssel usw.
Was ist das Problem mit Warteschlangen -Thread in Go's Crawler Colly?
Apr 02, 2025 pm 02:09 PM
Das Problem der Warteschlange Threading In Go Crawler Colly untersucht das Problem der Verwendung der Colly Crawler Library in Go -Sprache. Entwickler stoßen häufig auf Probleme mit Threads und Anfordern von Warteschlangen. � ...
Welche Bibliotheken werden für die Operationen der schwimmenden Punktzahl in Go verwendet?
Apr 02, 2025 pm 02:06 PM
In der Bibliothek, die für den Betrieb der Schwimmpunktnummer in der GO-Sprache verwendet wird, wird die Genauigkeit sichergestellt, wie die Genauigkeit ...
Ist es vielversprechender, Java oder Golang von Front-End zu Back-End-Entwicklung zu verwandeln?
Apr 02, 2025 am 09:12 AM
Backend Learning Path: Die Erkundungsreise von Front-End zu Back-End als Back-End-Anfänger, der sich von der Front-End-Entwicklung verwandelt, Sie haben bereits die Grundlage von Nodejs, ...
PostgreSQL -Überwachungsmethode unter Debian
Apr 02, 2025 am 07:27 AM
In diesem Artikel werden eine Vielzahl von Methoden und Tools eingeführt, um PostgreSQL -Datenbanken im Debian -System zu überwachen, um die Datenbankleistung vollständig zu erfassen. 1. verwenden Sie PostgreSQL, um die Überwachungsansicht zu erstellen. PostgreSQL selbst bietet mehrere Ansichten für die Überwachung von Datenbankaktivitäten: PG_STAT_ACTIVITY: Zeigt Datenbankaktivitäten in Echtzeit an, einschließlich Verbindungen, Abfragen, Transaktionen und anderen Informationen. PG_STAT_REPLIKATION: Monitore Replikationsstatus, insbesondere für Stream -Replikationscluster. PG_STAT_DATABASE: Bietet Datenbankstatistiken wie Datenbankgröße, Transaktionsausschüsse/Rollback -Zeiten und andere Schlüsselindikatoren. 2. Verwenden Sie das Log -Analyse -Tool PGBADG
Warum hat das Drucken von Saiten mit Println und String () -Funktionen unterschiedliche Effekte?
Apr 02, 2025 pm 02:03 PM
Der Unterschied zwischen Stringdruck in GO -Sprache: Der Unterschied in der Wirkung der Verwendung von Println und String () ist in Go ...
Wie löste ich das Problem des Typs des user_id -Typs bei der Verwendung von Redis -Stream, um Nachrichtenwarteschlangen in GO -Sprache zu implementieren?
Apr 02, 2025 pm 04:54 PM
Das Problem der Verwendung von RETISTREAM zur Implementierung von Nachrichtenwarteschlangen in der GO -Sprache besteht darin, die Go -Sprache und Redis zu verwenden ...
Wie gibt ich die mit dem Modell in Beego Orm zugeordnete Datenbank an?
Apr 02, 2025 pm 03:54 PM
Wie kann man im Beegoorm -Framework die mit dem Modell zugeordnete Datenbank angeben? In vielen BeEGO -Projekten müssen mehrere Datenbanken gleichzeitig betrieben werden. Bei Verwendung von BeEGO ...
