Question

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

我有一个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请求的百万美元片段并将其放入上面显示的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调用，并且位于不同的文件fragment.html中。模式对象由Ajax控制器调用传递。

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

Reshnsebody总是将我重定向到Requestmapping网址，而不是返回到ajax success方法。

这是一个来自Controller和Ajax的代码片段，用于表单提交。

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

这里是fragment.html中的Ajax Call：

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

    });
});

希望有所帮助！

使用Thymeleaf片段，Ajax和Spring引导提交表单后防止重新加载

1 个答案: