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.
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 valeur
in无效字符“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!