Impossible de sérialiser correctement le formulaire en json
L'éditeur PHP Banana vous présentera un problème courant : le formulaire ne peut pas être sérialisé correctement en json. En développement, nous devons souvent transmettre les données du formulaire au backend pour les traiter au format json. Cependant, nous rencontrons parfois des problèmes, tels que le fait que les données soumises ne peuvent pas être correctement converties au format json. Cela peut être dû à des caractères spéciaux dans le formulaire ou à un formatage incorrect. Dans cet article, nous explorerons quelques causes et solutions courantes pour vous aider à résoudre ce problème et garantir que les données du formulaire sont correctement sérialisées en json.
Contenu de la question
J'essaie de créer une application Web dans Golang qui vous permet de saisir les détails du reçu dans différents formulaires, puis ces entrées de formulaire sont sérialisées en objets json. Cependant, j'ai du mal à sérialiser le formulaire car chaque fois que j'essaie de « soumettre » le reçu, je reçois un message d'erreur.
C'est 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)
}
}C'est mon home.html, c'est le code HTML de ma page d'accueil
<!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>Voici mon reçu.html, c'est le code HTML de la page du reçu après avoir soumis le reçu.
<!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>J'ai essayé différentes méthodes de sérialisation mais rien ne fonctionne. Lorsque je remplis le formulaire de reçu et que je clique sur Soumettre, je m'attends à ce que je sois redirigé vers la page du reçu montrant les détails uniques de ce reçu. Mais je viens d'avoir une erreur, ma plus récente erreur était la suivante :
inCaractère "r" invalide recherchant le début de la valeurin无效字符“r”寻找值的开头
解决方法
请按如下方式更新您的 home.html。我将提交请求内容类型更改为 application/json 因为服务器中的 submithandler 正在寻找 json
home.html comme suit. J'ai changé le type de contenu de la demande de soumission en application/json car le submithandler du serveur recherchait 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);
}
});
});
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1207
24
Quelles sont les vulnérabilités de Debian OpenSSL
Apr 02, 2025 am 07:30 AM
OpenSSL, en tant que bibliothèque open source largement utilisée dans les communications sécurisées, fournit des algorithmes de chiffrement, des clés et des fonctions de gestion des certificats. Cependant, il existe des vulnérabilités de sécurité connues dans sa version historique, dont certaines sont extrêmement nocives. Cet article se concentrera sur les vulnérabilités et les mesures de réponse communes pour OpenSSL dans Debian Systems. DebianopenSSL CONNUTS Vulnérabilités: OpenSSL a connu plusieurs vulnérabilités graves, telles que: la vulnérabilité des saignements cardiaques (CVE-2014-0160): cette vulnérabilité affecte OpenSSL 1.0.1 à 1.0.1F et 1.0.2 à 1.0.2 Versions bêta. Un attaquant peut utiliser cette vulnérabilité à des informations sensibles en lecture non autorisées sur le serveur, y compris les clés de chiffrement, etc.
Quel est le problème avec le fil de file d'attente dans GO's Crawler Colly?
Apr 02, 2025 pm 02:09 PM
Problème de threading de file d'attente dans Go Crawler Colly explore le problème de l'utilisation de la bibliothèque Crawler Crawler dans le langage Go, les développeurs rencontrent souvent des problèmes avec les threads et les files d'attente de demande. � ...
Quelles bibliothèques sont utilisées pour les opérations du numéro de point flottantes en Go?
Apr 02, 2025 pm 02:06 PM
La bibliothèque utilisée pour le fonctionnement du numéro de point flottante dans le langage go présente comment s'assurer que la précision est ...
Transformant du développement frontal au développement back-end, est-il plus prometteur d'apprendre Java ou Golang?
Apr 02, 2025 am 09:12 AM
Chemin d'apprentissage du backend: le parcours d'exploration du front-end à l'arrière-end en tant que débutant back-end qui se transforme du développement frontal, vous avez déjà la base de Nodejs, ...
Méthode de surveillance postgresql sous Debian
Apr 02, 2025 am 07:27 AM
Cet article présente une variété de méthodes et d'outils pour surveiller les bases de données PostgreSQL sous le système Debian, vous aidant à saisir pleinement la surveillance des performances de la base de données. 1. Utilisez PostgreSQL pour reprendre la surveillance Afficher PostgreSQL lui-même offre plusieurs vues pour surveiller les activités de la base de données: PG_STAT_ACTIVITY: affiche les activités de la base de données en temps réel, y compris les connexions, les requêtes, les transactions et autres informations. PG_STAT_REPLIcation: surveille l'état de réplication, en particulier adapté aux grappes de réplication de flux. PG_STAT_DATABASE: Fournit des statistiques de base de données, telles que la taille de la base de données, les temps de validation / recul des transactions et d'autres indicateurs clés. 2. Utilisez l'outil d'analyse de journaux pgbadg
Dans Go, pourquoi les chaînes d'impression avec println et string () ont-elles des effets différents?
Apr 02, 2025 pm 02:03 PM
La différence entre l'impression de chaîne dans le langage go: la différence dans l'effet de l'utilisation de fonctions println et string () est en Go ...
Comment résoudre le problème de conversion de type user_id lors de l'utilisation du flux redis pour implémenter les files d'attente de messages dans le langage Go?
Apr 02, 2025 pm 04:54 PM
Le problème de l'utilisation de Redessstream pour implémenter les files d'attente de messages dans le langage GO consiste à utiliser le langage GO et redis ...
Comment spécifier la base de données associée au modèle de Beego ORM?
Apr 02, 2025 pm 03:54 PM
Dans le cadre du cadre de beegoorm, comment spécifier la base de données associée au modèle? De nombreux projets Beego nécessitent que plusieurs bases de données soient opérées simultanément. Lorsque vous utilisez Beego ...
