thymeleaf中可以使用ajax动态获取数据吗

Posted 2023-04-24

参考技术A success:function(data) //如果ajax的dataType为json则忽略这一步 var json = eval("("+ data +")"); //这里的docs有多个，对应的需要循环取出，这里只取出了第1个，索引从0开始 //如果无误的话，值应为33484 alert(json.response.docs[0].index);

无法使用 Spring Boot 和 Thymeleaf 以动态创建的形式获取更新的值

【中文标题】无法使用 Spring Boot 和 Thymeleaf 以动态创建的形式获取更新的值

【英文标题】：Unable to get updated values in a dynamically created form using Spring Boot and Thymeleaf

【发布时间】：2017-09-02 23:16:58

【问题描述】：

我在 Thymeleaf 中创建了一个动态表单，它以 UI 上的表格格式填充所有用户的反馈。当控制器的 GET Api 被点击时，表单首先被调用。相关代码如下：

allfeedbacks.html

<h2>Dynamic form</h2>
<form action="#" th:action="@/updatefb" th:object="$feedbacklist"
    method="post">
    <table>
        <tr>
            <th>Message</th>
            <th>Status</th>
            <th>Comments</th>
        </tr>
        <tr th:each="feedback : $feedbacklist.myfbList">
            <td th:text="$feedback.message" th:field="$feedback.message">The
                first name</td>
            <td><select>
                    <option value="Pending"
                        th:selected="$feedback.status == 'Pending'">Pending</option>
                    <option value="In Process"
                        th:selected="$feedback.status == 'In Process'">In
                        Process</option>
                    <option value="Done" th:selected="$feedback.status == 'Done'">Done</option>
            </select></td>
            <td><input type="text" placeholder="Enter Comment Here"
                name="comments" th:text="$feedback.comment"
                th:field="$feedback.comment" /></td>
        </tr>
    </table>
    <button type="submit">Submit</button>
</form>

基本上我已经创建了两个bean，一个是Feedback.java bean，另一个是FeedbackList.java bean。下面给出了相同的代码：

反馈.java

@Entity
@Table(name = "feedback")
public class Feedback implements Serializable 

private static final long serialVersionUID = -3009157732242241606L;

@Id 
private String id;

public String getId() 
    return id;


public String getMessage() 
    return message;


public String getStatus() 
    return status;


public String getComment() 
    return comment;


@Column(name = "message")
private String message;

@Column(name = "status")
private String status;

@Column(name = "comment")
private String comment;

public Feedback() 


public Feedback(String message, String status) 
    this.message = message;
    this.status = status;
    this.id = UUID.randomUUID().toString();     

反馈列表.java

public class FeedbackList 

ArrayList<Feedback> myfbList;

public ArrayList<Feedback> getMyfbList() 
    return myfbList;
   

public void setMyfbList(ArrayList<Feedback> myfbList) 
    this.myfbList = myfbList;
   

我的 Controller 类的相关代码如下：

    @RequestMapping(value = "/getAll", method = RequestMethod.GET)
    public String getAllFeedbacks(@Valid FeedbackList feedbacklist, 
    BindingResult bindingResult, Model model) 

    ArrayList<Feedback> fbarray = new ArrayList<>();
    for (Feedback fb : repository.findAll()) 
        fbarray.add(fb);
        
    feedbacklist.setMyfbList(fbarray);
    model.addAttribute("feedback", new Feedback());
    model.addAttribute("feedbacklist", feedbacklist);
    return "allfeedbacks";
    

    @RequestMapping(value = "/updatefb", method = RequestMethod.POST)
    public String updatefbStatus(@Valid FeedbackList feedbacklist, 
    BindingResult 
    bindingResult, Model model) 

    //feedbacklist is coming as NULL below
    for (Feedback fb : feedbacklist.getMyfbList()) 
        System.out.println(fb.getComment());
        System.out.println(fb.getMessage());
        System.out.println(fb.getStatus());
        
    // Code to update the database with the new status and comment would go
    // here
    return "result";
   

当我触发 Get 请求时，表单会在 UI 上正确呈现，但是，当我在表单中进行一些更改并提交 (POST) 时，feedbacklist 会显示为 NULL。有人可以指导我吗？

【参考方案1】：

在 Thymeleaf 的表单中使用列表有点棘手，你需要使用特定的语法，这里我给你一个例子。

<tr th:each="feedback : $feedbacklist.myfbList">
    <td th:field="*myfbList[__$feedbackStat.index__].message">The
        first name
    </td>
    ...//Same for others fields
</tr>

在 thymeleaf 中，您必须使用 Stat 对象来表示要设置值的数组位置，同样作为对象内的普通字段，您必须使用 '*' 表示法。

【讨论】：

嗨@cralfaro，感谢您的回复。实际上我在代码中犯了很多错误，首先我创建了另一个名为 FeedbackPOJO.java 的类，它是一个简单的 POJO 类，具有与 Feedback.java 中相同的字段。我的 allfeedbacks.html 也是完全错误的。我遵循***.com/a/36522177/5105263 给出的答案，它帮助我解决了大约 90% 的问题。我仍然没有找到正确集成下拉菜单的方法，将在几天后发布更新的代码。谢谢！！

@SaurabhGour 一定要在您提出下一个问题时给我发送消息，我会看看是否可以提供帮助