Heim >Backend-Entwicklung >Golang >Das Formular kann nicht ordnungsgemäß in JSON serialisiert werden
Das Formular kann nicht ordnungsgemäß in JSON serialisiert werden
- WBOYnach vorne
- 2024-02-14 20:36:10664Durchsuche
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!