Question

我有一个使用Thymeleaf的Spring-Boot项目。

HTML表单包含用于输入个人详细信息的字段组，如：

<button type="button" class="btn btn-default" id="btnGetPerson"><i class="fa fa-search"></i></button>
<Input type="text" id="id0" name="id" th:field="*{person[0].id}" />
<Input type="text" name="surname" th:field="*{person[0].surname}" />
<Input type="text" name="firstname" th:field="*{person[0].firstname}" />
...
<button type="button" class="btn btn-default" id="btnGetPerson"><i class="fa fa-search"></i></button>
<Input type="text" id="id1" name="id" th:field="*{person[1].id}" />
<Input type="text" name="surname" th:field"=*{person[1].surname}" />
<Input type="text" name=firstname" th:field="*{person[1].firstname}" />
etc

结果从服务器正确地以JSON形式返回，如下所示：

surname : Smith
firstname: Bob

然后在脚本文件中我得到了：

    // GET AND RETURN PERSON
$( '#btnGetPerson').click(function() {
    var $theForm = $(this).closest('.panel-body');
    $.get('/person/' +$('#id0').val(), function(result) {
        $theForm.find('input[name="surname"]').val(result.surname);
    });
});

然后我会做类似的事情：

Object.keys(result).forEach(function(key) {
$('[name="' + key + '"]').val(result[key]);
});

迭代JSON中的键和值 - 但是Thymeleaf重命名HTML中的名称字段以匹配表单支持对象，因此我的名字=“surname”覆盖了name =“event.person [0] .surname“where event是支持对象。

如何将从服务器返回的JSON数据映射到DOM？

更新

渲染的html示例如下：

                    <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Victim / Subject</h3>
                    </div>
                    <div class="panel-body">


                        <div class="row">
                            <input type="text" class="form-control hidden" id="personId0" name="persons[0].id" value="1" />
                            <div class="col-sm-5">
                                <div class="form-group">

                                    <label for="surname0" class="col-sm-2 control-label">Surname</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="surname0" placeholder="surname" name="persons[0].surname" value="EASTWOOD"/>
                                    </div>
                                </div>
                            </div

我还应该补充说，表单最初呈现三个人（索引0,1,2），然后有一个按钮，通过克隆html片段动态添加另一组人员字段。

Answer 1

从服务器返回的JSON数据如下所示：

{  
"id":1,
"surname":"EASTWOOD",
"middlename":"James",
"firstname":"Clint",
"countryOfBirth":"US",
"occupation":"Actor",
"gender":"Male",
"phoneHome":"555-1234",
"dob":"1965-06-17"
}

将此映射到输入，但是名称和ID由thymeleaf重命名。因此，为了解决这个问题，请使用名称与JSON中的键名匹配的data-property字段。所以html输入看起来像：

<input type="text" class="form-control  person" data-property="surname" placeholder="surname" th:field="*{persons[0].surname}"/>
<input type="text" class="form-control  person" data-property="firstname" placeholder="Firstname" th:field="*{persons[0].firstname}"/>
<select class="selectpicker form-control person" data-property="countryOfBirth" data-live-search="true" title="Birth Country" th:field="*{persons[0].countryOfBirth}">

现在data-property提供了与JSON名称匹配的标记。

找到最近的panel-body然后更新输入的jquery和javascript如下所示。注意由于下拉菜单的方式在twitter-bootstrap中显示为按钮，我必须找到不同的类：

// GET AND RETURN PERSON
$( '#btnGetPerson').click(function() {
    var $theForm = $(this).closest('.panel-body');
    $.get('/person/' +$('#nia0').val(), function(result) {

        // LOOPS OVER THE PERSON INPUTS
        $theForm.find('.form-control.person').each(function()  {
            var formkey = $(this).attr('data-property');
            $(this).val(result[formkey]);
        });

        // LOOPS OVER THE SELECT PICKERS
        $theForm.find('.bootstrap-select').each(function() {
            var formkey = $(this).find('.selectpicker.form-control').attr('data-property');
            $(this).find('.filter-option').text(result[formkey]);
            $(this).find('.filter-option').val(result[formkey]);
        });
    });
});

感谢所有帮助过的人。

希望这有助于其他人。

Thymeleaf＆amp; AJAX映射JSON数据

1 个答案: