如何使用 thymeleaf 和 Spring Boot 以 json 格式显示用户输入数据

Posted 2023-02-19

【中文标题】如何使用 thymeleaf 和 Spring Boot 以 json 格式显示用户输入数据

【英文标题】：How to show user input data in json format using thymeleaf and SpringBoot

【发布时间】：2022-01-14 20:39:15

【问题描述】：

我创建了一个动态用户注册表单，我想向用户显示 用户在序列填充中以 json 格式输入数据。但我不能 获取此类数据。我想发送和获取以下格式的数据。

 "advertise_id": 16,
 "form": [
   
     "type": "text",
     "subtype": "email",
     "required": false,
     "label": "Email",
     "className": "form-control",
     "name": "email",
     "access": false,
     "value": "[e-mail]"
   ,
   
     "type": "date",
     "required": true,
     "label": "Date of Birth",
     "className": "form-control",
     "name": "dob",
     "access": false,
     "value": "2002-07-21",
     "description": "dob"
   
 ]

我想在用户点击注册按钮时发送值 注册.html

<div class="singup-form">
<form method="post" th:action="@/signup">
<input id="id" th:field="*id" type="hidden"/>
<input id="form" name="form" th:field="*form" type="hidden"/>
<div th:each="item,iterStat : *form">
<div class="form-group">
<label th:for="$item.name" th:text="$item.label"></label>
<div th:if="$item.validation == 'dob'">
<input class="form-control" th:id="$item.name" th:name="$item.name"
th:placeholder="$item.placeholder" th:required="$item.required"
th:type="$item.type" th:attr="max=$#dates.format(item.date, 'yyyy-MM-dd')"/>
</div>
<div th:unless="$item.validation == 'dob'">
<input class="form-control" th:id="$item.name" th:name="$item.name"
th:placeholder="$item.placeholder" th:required="$item.required"
th:type="$item.type"/>
</div>
</div>
</div>

SignUp.kt

package com.ape.model

data class SignUp(
    val id: Int,
    val email: String? = "",
    val login_type: String? = "",
    val dob: String? = ""
)

data class ModelSignUp(
    val firstname: String? = "",
    val month: String? = "",
    val day: String? = "",
    val year: String? = "",
    val email: String? = "",
    val phone_number: String? = "",
)

广告.kt

package com.ape.model

import java.util.*
import kotlin.collections.ArrayList

class Advertisement(
    val form:ArrayList<Form>?=null,
)

class ErrorResponse(
    var message: String? = ""
)
class Form(
    val type:String="",
    val required:Boolean,
    val label:String="",
    val placeholder:String="",
    val name:String="",
    val value:String="",
    val validation:String="",
    val min:Int,
    var date: Date = Date(),
)

Homecontroller.kt

@PostMapping("/signup")
    fun submitSignUpDetails(@RequestParam(name = "form") form: ArrayList<Form>): String 
        val arrayList = arrayListOf<Map<String, Any>>()
        form.forEach 
            val map = hashMapOf<String, Any>()

            arrayList.add(map)
        
        print("Lisst $arrayList")

        return "signup"
    

如何以 json 格式发送数据。我使用百里香作为字体结尾和 Spring Boot 作为后端。

【问题讨论】：

为什么要以 JSON 格式发送数据？ Thymeleaf 不是这样工作的。您可能想阅读Form handling with Thymeleaf。

【参考方案1】：

你可以在里面使用map和arrayList，因为json在key中显示数据 值对，所以你可以遵循这些线 fun getSubmitDetail(jsonMap: Map,model: Model): Boolean var isError = false

    val arrayList = ArrayList<Map<String, Any?>>()
    advertisement?.form?.forEach 
        val map = hashMapOf<String, Any?>()
        map["type"] = it.type
        map["required"] = it.required.toString()
        map["label"] = it.label
        map["placeholder"] = it.placeholder
        map["name"] = it.name
        map["value"] = jsonMap[it.name].toString()
        map["validation"] = it.validation
        map["min"] = it.min.toString()

        arrayList.add(map)