Rumah > Artikel > pembangunan bahagian belakang > Tidak dapat mensirikan borang dengan betul kepada json
Tidak dapat mensirikan borang dengan betul kepada json
- WBOYke hadapan
- 2024-02-14 20:36:10584semak imbas
PHP Editor Banana akan memperkenalkan anda kepada masalah biasa: borang tidak boleh bersiri ke json dengan betul. Dalam pembangunan, kita selalunya perlu menghantar data borang ke bahagian belakang untuk diproses dalam format json. Walau bagaimanapun, kadangkala kami menghadapi beberapa masalah, seperti data yang diserahkan tidak boleh ditukar dengan betul ke dalam format json. Ini mungkin disebabkan oleh aksara khas dalam bentuk atau pemformatan yang salah. Dalam artikel ini, kami akan meneroka beberapa punca dan penyelesaian biasa untuk membantu anda menyelesaikan masalah ini dan memastikan data borang disirikan ke json dengan betul.
Kandungan soalan
Saya cuba mencipta aplikasi web dalam golang yang membolehkan anda memasukkan butiran resit ke dalam bentuk yang berbeza, dan kemudian input borang ini disirikan ke dalam objek json. Walau bagaimanapun, saya menghadapi masalah untuk mensiri borang kerana setiap kali saya cuba "menyerahkan" resit, saya mendapat mesej ralat.
Ini 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)
}
}
Ini rumah saya.html, ini adalah html halaman utama saya
<!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>
Ini resit saya.html, ini adalah html halaman resit selepas menyerahkan resit.
<!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>
Saya mencuba kaedah bersiri yang berbeza tetapi tiada apa yang berkesan. Apabila saya mengisi borang resit dan klik hantar, saya menjangkakan bahawa saya akan dibawa ke halaman resit yang menunjukkan butiran unik resit tersebut. Tetapi saya baru sahaja mendapat ralat, ralat terbaru saya ialah ini:
aksara "r" tidak sah mencari permulaan nilaiin无效字符“r”寻找值的开头
解决方法
请按如下方式更新您的 home.html。我将提交请求内容类型更改为 application/json 因为服务器中的 submithandler 正在寻找 json
home.html anda seperti berikut. Saya menukar jenis kandungan permintaan serah kepada application/json kerana submithandler dalam pelayan sedang mencari 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);
}
});
});
Atas ialah kandungan terperinci Tidak dapat mensirikan borang dengan betul kepada json. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!