我在这里找了很长时间，但没有任何帮助。

我有一个Spring Boot应用程序以及Thymeleaf Bootstrap和jQuery

应用布局

在应用程序布局中，右侧菜单位于mqttCenter. html中：

<div class="panel panel-default panel-back">
    <div class="panel-body button-wrapper">                   
        <a type="button" onlick="showIotManagerFrag();"
           href="javascript:void(0);" class="btn btn-primary btn-block">IoT - Manager</a>
    </div>
</div>
<div id=deviceManager></div>

其中按钮打开一个带有ajax请求的thymeleaf片段，并将其放入上方显示的deviceManager div元素中。这是导航栏旁边的布局。因为我意识到使用ajax调用没有页面刷新或指向另一个页面。

这是片段. html：

<div id="device-management" th:fragment="deviceManager" class="panel panel-default panel-back">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">IoT - Manager:</h1>
            </div>  
        </div>
        <div class="row">
            <div class="col-md-5">
                <h3 class="text-center bottom-buffer">Fügen Sie ein neues IoT - Device hinzu:</h3>      
                <form  id="addDevice" name="addDevice" th:action="@{/users/addDevice}" th:object="${device}" method="post">
                    <div class="form-group">
                        <label class="control-label" for="name">Device - Name:</label>                          
                        <input type="text" class="form-control" id="firstName" th:field="*{name}" placeholder="Name eingeben">
                    </div>  
                    <div class="form-group">
                        <label class="control-label" for="name">Device - Typ:</label>
                        <select  class="form-control" id="sel1" th:field="*{type}">
                            <option th:each="deviceType : ${deviceTypes}" th:value="${deviceType.type_id}" th:text="${deviceType.type}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="topic">MQTT - Topic:</label>                          
                        <input type="text" class="form-control" id="topic" th:field="*{topic}" placeholder="Topic eingeben">
                    </div>              
                     <div class="form-group">
                        <label class="control-label"for="description">Beschreibung:</label>
                        <textarea class="form-control" rows="5" id="description" th:field="*{description}" placeholder="Eine kurze Beschreibung"></textarea>
                    </div>                  
                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-default button-width"><span class="glyphicon glyphicon-send"></span>  Hinzufügen</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-5">
                <h3 class="text-center bottom-buffer">Löschen Sie ein vorhandenes IoT - Device:</h3>
                <form id="removeDevice" name="removeDevice" th:action="@{/users/removeDevice}" th:object="${device}" method="post">
                    <div class="form-group">
                        <label class="control-label" for="name">IoT - Device auswählen:</label>
                        <select class="form-control" id="sel1" th:field="*{name}">
                            <option th:each="deviceName : ${deviceList}" th:value="${deviceName.device_id}" th:text="${deviceName.name}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-default button-width"><span class="glyphicon glyphicon-send"></span>Löschen</button>
                        </div>
                    </div>

                </form>
                <div id="device-submit"></div>
            </div>
        </div>
    </div>
</div>

该片段从mqttCenter. html调用，位于不同的文件片段.html中。模型对象由Ajax控制器调用传递。

所以我不希望在提交表单后刷新或重定向到其他页面。我在这里查看了许多ajax请求，例如将表单放入json并在我的控制器中使用@Response seBody和合适的Mediatypes，但没有任何效果。

Teh Resopnsebody总是将我重定向到Request estmap url，而不是返回到ajax成功方法。

这里是来自Controller和Ajax的表单Submit的代码片段。

@RequestMapping(value = "/users/addDevice", method = RequestMethod.POST, consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE,
        produces = MediaType.TEXT_PLAIN_VALUE) 
@ResponseBody
public String deviceSaving(@Valid @ModelAttribute("addDevice") AddDevice device, BindingResult bindingResult)
{
    do Stuff.
return "success- String"

而这里是片段. html中的Ajax调用：

$(document).ready(function() 
{

      $('#addDevice').submit(function(event) 
      {

          var json = $('#addDevice').serialize();

        $.ajax({
            url: "addDevice",
            data: JSON.stringify(json),
            type: "POST",

            beforeSend: function(xhr) 
            {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
            },

            success: function(data) 
            {
                var respContent = typeof(data);
                console.log(respContent); 
                respContent += "<span>"
                respContent += smartphone + "</span>"

                $("#device-submit").html(respContent);         
            }
        });

    event.preventDefault();
  });

});

我做错了什么？谢谢你的帮助…