我正在嘗試使用 jQuery 或 Javascript 動態更新 AJAX POST 請求中的自訂欄位。
AJAX POST 請求屬於 WordPress 平台上的 Amelia 日曆外掛。
這是 AJAX POST 請求
"type": "appointment",
"appointment": {
"id": 2,
"bookings": [
{
"id": 2,
"customerId": 4,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null
},
"status": "approved",
"extras": [],
"couponId": null,
"price": 100,
"coupon": null,
"customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
"info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
"appointmentId": 2,
"persons": 1,
"token": "127ce49924",
"payments": [
{
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
}
],
"utcOffset": null,
"aggregatedPrice": true,
"isChangedStatus": null,
"isLastBooking": null,
"packageCustomerService": null,
"ticketsData": [],
"duration": 1800,
"created": null,
"actionsCompleted": false
}
],
"notifyParticipants": 1,
"internalNotes": null,
"status": "approved",
"serviceId": 1,
"parentId": null,
"providerId": 1,
"locationId": null,
"provider": null,
"service": null,
"location": null,
"googleCalendarEventId": null,
"googleMeetUrl": null,
"outlookCalendarEventId": null,
"zoomMeeting": null,
"lessonSpace": null,
"bookingStart": "2023-05-08 10:00:00",
"bookingEnd": "2023-05-08 10:30:00",
"type": "appointment",
"isRescheduled": null,
"resources": []
},
"booking": {
"id": 2,
"customerId": 4,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null
},
"status": "approved",
"extras": [],
"couponId": null,
"price": 100,
"coupon": null,
"customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
"info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
"appointmentId": 2,
"persons": 1,
"token": "127ce49924",
"payments": [
{
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
}
],
"utcOffset": null,
"aggregatedPrice": true,
"isChangedStatus": null,
"isLastBooking": null,
"packageCustomerService": null,
"ticketsData": [],
"duration": 1800,
"created": null,
"actionsCompleted": false
},
"utcTime": [
{
"start": "2023-05-08 10:00:00",
"end": "2023-05-08 10:30:00"
}
],
"appointmentStatusChanged": false,
"recurring": [],
"package": [],
"packageId": null,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null,
"locale": "en_US",
"timeZone": "Europe/London"
},
"bookable": {
"id": 1,
"name": "Test Service 1",
"description": "",
"color": "#1788FB",
"price": 100,
"deposit": 0,
"depositPayment": "disabled",
"depositPerPerson": true,
"pictureFullPath": null,
"pictureThumbPath": null,
"extras": [],
"coupons": [],
"position": null,
"settings": "{\"payments\":{\"paymentLinks\":{\"enabled\":false,\"changeBookingStatus\":false,\"redirectUrl\":null},\"onSite\":true,\"payPal\":{\"enabled\":false},\"stripe\":{\"enabled\":false},\"mollie\":{\"enabled\":false},\"razorpay\":{\"enabled\":false}},\"zoom\":{\"enabled\":false},\"lessonSpace\":{\"enabled\":false}}",
"fullPayment": false,
"minCapacity": 1,
"maxCapacity": 1,
"duration": 1800,
"timeBefore": null,
"timeAfter": null,
"bringingAnyone": true,
"show": true,
"aggregatedPrice": true,
"status": "visible",
"categoryId": 1,
"category": null,
"priority": [],
"gallery": [],
"recurringCycle": null,
"recurringSub": null,
"recurringPayment": 0,
"translations": null,
"minSelectedExtras": null,
"mandatoryExtra": null,
"customPricing": "{\"enabled\":false,\"durations\":{}}",
"maxExtraPeople": null,
"limitPerCustomer": "{\"enabled\":false,\"numberOfApp\":1,\"timeFrame\":\"day\",\"period\":1,\"from\":\"bookingDate\"}"
},
"paymentId": 2,
"packageCustomerId": null,
"payment": {
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
},
"customerCabinetUrl": ""
}
當我在使用者按下提交之前登陸頁面時，我希望使用 jQuery 或 Javascript 更新以下字段，其中顯示 Test Field 1 和 Test Field 2：
"customFields": "{\"1\":{\"label\":\"測試欄位1\",\"type\":\"text\",\"value\" :\ "測試欄位1\"},\"2\":{\"標籤\":\"測試欄位2\",\"型別\":\"文字\",\"值\":\ "測試字段2\"}}"
#使用者介面如下所示：
我認為您需要將現有的 JSON 字串解析為物件。之後，修改該物件中的必填欄位。最後，將修改後的物件轉換回 JSON 字串。