Question

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

现在，当我提交表单时，我想在控制台中显示消息：

$("#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>

我注意到从未调用过mapping / admin / newperiod。将按钮发送请求直接发送到主页面（开始播种时我一直都是POST不允许的错误）。

我做错了什么？ :(

Answer 1

要使其正常工作，您只需做一些小改动。

在提交按钮中，将类型更改为按钮，因为您现在将使用jquery处理它
```
<input id="submit-new-period" type="button"  value="save"> SUBMIT</input>
```

为该按钮创建一个事件单击并附加与此类似的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
            }
        }
    });
}

请记住在您的控制器中添加注释 @ResponseBody ，因为您将通过JS处理它

Answer 2

好的，我找到了解决办法我不知道为什么它会像那样......但是......

print("Hello world")

对我来说，还有什么秘诀，为什么会这样有效：

from tkinter import *
root = Tk()
root.mainloop()

而这不是：

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

和View.PAGE_ADMIN_CONTENT_GESTION_PERIOD_NEW

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

使用jQuery

2 个答案: