Question

我正在开发一个Spring网页应用程序，我有一个登录页面，但我想在处理表单时显示一个gif图像。请任何人都可以指导我通过最好的方式来实现这一目标。

这是我的HTML页面中包含javascript函数的部分。

<div class="loginbox">
<img src = "images/login2.jpg" class="avatar" >
<form  id="myForm" action="login" method='POST' onsubmit="return validate();" >
<div th:if="${param.message != null}" class="alert alert-info" th:text="${param.message[0]}">message</div>
<div th:if="${param.error != null}" class="alert alert-danger" th:text="${session[SPRING_SECURITY_LAST_EXCEPTION]}">error</div>
<p>Username</p>
<input type="text" name="username" placeholder="Enter your Email">
<p> Password</p>
<input type="password" name="password" placeholder="Enter your password">
<div>
<input id="myBtn" type="submit" name="submit"  value="Login"> 
<img id="loadingImg" src="../images/loading.gif" style="display:none;" alt="LOADING PLEASE WAIT....">
</div>
</form>
</div>
 <script th:inline="javascript">
 function validate() {
    if (document.f.username.value == "" && document.f.password.value == "") {
        alert(/*[[#{message.username} + #{message.password}]]*/);
        document.f.username.focus();
        return false;
    }
    if (document.f.username.value == "") {
        alert(/*[[#{message.username}]]*/);
        document.f.username.focus();
        return false;
    }
    if (document.f.password.value == "") {
        alert(/*[[#{message.password}]]*/);
        document.f.password.focus();
        return false;
      }
   }
  </script>

我试图像这个函数一样在js中添加一些东西

function validateGif(){

     var  myForm= document.getElementById('myForm');
     var  loadingImg= document.getElementById('loadingImg');

      myForm.style.display='none';
      loadingImg.style.display='block';

    setTimeout (function(){
        myForm.style.display='block';
      loadingImg.style.display='none';
    }5000);

}

但我知道它不起作用。我想显示gif图像，只要表单提交，如果有一些验证错误，停止gif并显示错误。但是，gif图像应该在认证后一直加载到重定向。

最好的方法是什么。

感谢任何帮助，谢谢！

Answer 1

以下是jQuery的一个简单示例。

$('#myForm').submit(function (event) {
  // prevent the default action of the form, i.e. submitting 
  event.preventDefault() 

  if (document.f.username.value == "" && document.f.password.value == "") {
      alert(/*[[#{message.username} + #{message.password}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.username.value == "") {
      alert(/*[[#{message.username}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.password.value == "") {
      alert(/*[[#{message.password}]]*/);
      document.f.password.focus();
      return false;
    }
  }
  else{
    // serialize your form data
    var formdata = $(this).serialize();
    // show image 
    $('#loadingImg').fadeIn();
    // run ajax request
    $.ajax({
        method: 'POST',
        type: 'POST', // if using jquery 1.9 or earlier
        data: formdata,
        url: 'your/form/action',
        success: function (data) {
           $('#loadingImg').fadeOut(); 
        }
    });
  }
});

正在处理表单时显示gif图像

1 个答案: