使用jQuery在Spring Boot + thymeleaf中发布表单

Question

我正在尝试使用jQuery发布表单。我看到很多教程，但在我的cas中有任何作品。所以现在我试着从简单的案例。

现在，当我提交表单我woudl喜欢在控制台显示消息：

$("#new-period-form").submit(function (event) { 
    console.log("Form submitted"); 
}); 

但这一事件发生更新。

<form action="#" id="new-period-form" 
     th:object="${currentPeriodForm}" method="post"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
     <input class="mdl-textfield__input" type="text" 
       id="period"    
       th:field="*{period}" 
       pattern="^((19|20)\d\d)-(0?[1-9]|1[012])$"/> 
     <label class="mdl-textfield__label" for="period">Text...</label> 
     <span class="mdl-textfield__error">Input is not a valid format</span> 

    </div> 
    <input id="submit-new-period" type="submit" value="save"> SUBMIT</input> 
</form> 

我注意到thatmapping/admin/newperiod永远不会被调用。直接提交按钮发送请求到主页面（开始播种时，我一直都不允许POST POST错误）。

我做错了什么？ :(

Answer 1

为了使它工作，你只需要做一些小的改动。

1. 在你提交按钮类型更改为按钮，你会用jQuery现在处理它

   <input id="submit-new-period" type="button" value="save"> SUBMIT</input> 
   

2. 创建事件点击该按钮，并附类似这样的jQuery函数。

   $(function() { 
       $('#submit-new-period').click(saveForm); 
   }); 
   
   
   function saveForm(){ 
       $.ajax({ 
        method: "POST", 
        url: "/your/action/endpoint", 
        data: $('#idYourForm').serialize(), 
        success: function(status){ 
         if(status) { 
          //here you check the response from your controller and add your business logic 
         } 
        } 
       }); 
   } 
   

3. 请记住，在你的控制器中添加注释@ResponseBody因为你会被JS

Answer 2

现在即时通讯使用类似的东西来处理它。但它不起作用（重新加载od材料）。加载后，我无法运行programaticaly升级DOM。

$(document).on('submit', '#new-period-form', function(e) { 
    console.log("my log function"); 

    var data = {}; 

    data["period"] = $("#period").val(); 
    var form = $("#new-period-form"); 
    $.ajax({ 
     type : "POST", 
     contentType : "application/json", 
     url : "/admin/newperiod", 
     data : JSON.stringify(data), 
     timeout : 100000, 
     dataType: "html", 
     success : function(data) { 
      $("#cotent-period-div").replaceWith(data); 
      }, 
     error : function(e) { 
      console.log("ERROR: ", e); 
     }, 
     done : function(e) { 
      console.log("DONE"); 
     } 
    }); 
    // componentHandler.upgradeDom(); -<- didnt work here. 
    e.preventDefault(); 
}); 

---

或者更精确。 点击按钮之后，我想要做componentHandler.upgradeDom（）。但它不起作用。

function loadNewPeriodForm() { 
    var url = "/admin/gestion-period-new"; 
    $("#content-period").load(url); 
     componentHandler.upgradeDom(); 
} 

Answer 3

好的我找到了解决方案。
我不知道到底为什么它的工作原理一样，..但...

$(document).on('click', '#button-new-period', function(e) { 
      var url = "/admin/gestion-period-new"; 
      $.ajax({ 
        type : "GET", 
        url : "/admin/gestion-period-new", 
        timeout : 100000, 
        dataType: "html", 
        success : function(data) { 
         **$("#content-period").replaceWith(data); 
         window.componentHandler.upgradeDom();** 
         }, 
        error : function(e) { 
         console.log("ERROR: ", e); 
        }, 
        done : function(e) { 
         console.log("DONE"); 
        } 
       }); 
       e.preventDefault(); 
}); 

什么仍然是我的秘密，那为什么这个工程：

    $("#content-period").replaceWith(data); 
        window.componentHandler.upgradeDom(); 

这不是：

$("#content-period").load(url); 
window.componentHandler.upgradeDom(); 

控制器负载新时期形式

@RequestMapping("gestion-period-new") 
public String gestionPeriodNew(CurrentPeriodForm currentPeriodForm) { 
    return View.PAGE_ADMIN_CONTENT_GESTION_PERIOD_NEW; 
} 

而且View.PAGE_ADMIN_CONTENT_GESTION_PERIOD_NEW

public static final String PAGE_ADMIN_CONTENT_GESTION_PERIOD_NEW = "admin-page/gestion-period :: content-new-period";