时间戳

首页 > 解决方案 > 使用 thymeleaf 提交之前的 javascript 调用无法按预期工作

javascript - 使用 thymeleaf 提交之前的 javascript 调用无法按预期工作

问题描述

我是 javascript 新手，所以对许多人来说这可能是一个简单的问题。

我在 thymeleaf 中使用了表单 sumbit，并试图在表单提交到 spring mvc 控制器之前添加一个 JS 验证。我可以分别执行这两个操作（单独的任务）。但是我不能真正让它们一个接一个地工作（js函数和表单提交）。提交动作由表单内的按钮触发。

<form th:action="@{/user/trigger}" th:object="${triggers}" method="post">
                            
 <input type="hidden" name="tradeDate"  th:value="${trigger.id.tradeDate}">
<button type="submit" id="ignore" name="action" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
                            </form>

js函数如下：

$(".ignore").click(function() {
//do some processing;
                return false;
            });

那么有人可以帮我重写这段代码，首先调用JS函数并将表单提交给java spring mvc控制器吗？提前致谢。

标签： javascriptspring-mvcthymeleaf

解决方案

您的方法的问题是，在您的 java 脚本验证代码之后，您的 html“提交”按钮正在提交表单，因为它们正在一个接一个地执行。在验证失败后，您没有做任何事情来阻止表单提交。为了克服这个问题，您可以做的是仅在验证成功后通过您的 JavaScript 代码手动提交表单。所以你的代码看起来像这样 -

1.) Html 代码的更改，而不是将按钮类型创建为“提交”，而是将其设置为普通按钮并在单击时运行您的 javascript 验证功能 -

    <form th:action="@{/user/trigger}" th:object="${triggers}" id="myForm" method="post">
                                
        <input type="hidden" name="tradeDate"  th:value="${trigger.id.tradeDate}">
        <button type="button" id="ignore" name="action" onclick="myValidationFunction()" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
      
 </form>

2.) Javascript 代码的更改，现在单击上面的按钮后，您的 javascript 验证功能将执行，验证成功后使用表单 ID 手动提交表单，如下所示 -

    function myValidationFunction(){
    
      if( some_condition ){
        //validation failed
        return; 
      }
    

     //validation success , when above mentioned if condition is false.
     $("#myForm").submit(); // Submit the form
    
    
    }

有关submit在 jquery 中使用的更多信息，请参阅官方文档 -

https://api.jquery.com/submit/

推荐阅读