首页 > 解决方案 > 如何在 jquery 中获取 thymleaf 对象?

问题描述

我必须在 jquery 中打印对象。无法获取对象。请建议我。我是 thymleaf 的新手。Spring Boot 响应以 html 和 onclick 按钮呈现我必须在 jquery 中获取用户对象。任何机构都可以帮助我。我在问题中发布了 html 和 jquery 代码。

HTML 代码

<div class="tab-pane fade" id="tabs-profile" role="tabpanel" aria-labelledby="tabs-profile-tab">
                <div class="row p-5 m-1">

                    <table class="table table-bordered table-striped">
                        <thead class="bg-light">
                            <tr>
                                <th><strong>#Sr No</strong></th>
                                <th scope="col"><strong>Name</strong></th>
                                <th scope="col"><strong>Address</strong></th>
                                <th scope="col"><strong>Email</strong> </th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr th:each="user,iter : ${userData}">
                                <th>
                                        <div class="form-check">
                                            <input class="form-check-input"  th:user-info="${user}" th:value="${#strings.trim(user.id)}" type="radio" name="userid" id="userid">
                                            <label class="form-check-label" for="slvid1" th:text="${iter.index+1}"></label>
                                        </div>
                                </th>

                                <td th:text="${#strings.trim(user.name)}"></td>
                                <td th:text="${#strings.trim(user.addresss)}"></td>                                    
                                <td th:text="${#strings.trim(user.email)}"><strong></strong></td>
                                <td><strong></strong></td>
                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="row text-center">
                    <div class="col-12 m-3">
                        <button id="usereditbtn" type="button" class="btn btn-voc mx-3" data-toggle="modal">Edit User</button>                   
                    </div>
                </div>
            </div>

jQuery代码

<script th:inline="javascript">
        


$(document).ready(function () {

 // Attach Button click event listener
$("#usereditbtn").click(function(){        
    
     var selectedVal = "";
    var selected = $("input[type='radio'][name='userid']:checked");
    if (selected.length > 0) {
        selectedVal = selected.val();
       
       var userData = selected.attr('user-info');  
       
       console.log("userData := "+userData);

        var tpl = _.template($("#tpl-add-edit-user-data").html());
        var opts = {
            user:userData
        };
        var elem = tpl(opts);
        $("#modaledituser").empty();
        $(".modal-body #modaledituser").html(elem);
         $('#UserModal').modal('show');
    } else {
       alert("Please select user");
    }
});});  

标签: javascripthtmljqueryspring-bootthymeleaf

解决方案


推荐阅读