使用 Thymeleaf 片段、Ajax 和 Spring boot 防止表单提交后重新加载

Question

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

我有一个带有 Thymeleaf Bootstrap 和 jQuery 的 Spring Boot 应用程序

Application Layout

在应用程序的Layout右边的菜单在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 Fragment 并将其放入上面显示的 deviceManager div 元素中。这是导航栏旁边的布局。因为我通过 ajax 调用意识到没有页面刷新或指向另一个页面的方向。

这里是fragments.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 并在我的控制器中使用 @ResponseBody 和合适的 Mediatypes，但没有任何效果。

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

这里是来自 Controller 和 Ajax 的代码 sn-p 用于表单提交。

@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"

这里是 Fragments.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();
  });

});

我做错了什么？感谢您的帮助...

Answer 1

确保您在 JavaScript 控制台中没有看到任何错误。 我认为你应该将 preventDefault 行移到提交函数的最前面。

 $(document).ready(function() {

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

        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);
            }
        });

    });
});

希望有帮助！