阻止弹出式登录表单刷新页面

Question

试图阻止此登录表单刷新，我为此表单使用了w3schools指南。 http://www.w3schools.com/howto/howto_css_login_form.asp 。 这是“模态”示例。

这是模态代码：

<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" 
class="close" title="Close Modal">&times;</span>

<!-- Modal Content -->
<form class="modal-content animate">
 <label for="my-checkbox">Checkbox</label>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>
  <br>
  <label><b>Password</b></label>
  <input type="password" placeholder="Enter Password" name="psw" required>
<br>
  <button type="submit">Login</button>
  <input type="checkbox" checked="checked"> Remember me
</div>

<div class="container" style="background-color:#f1f1f1">

  </div>
 </form>
</div>

 <!-- Js part -->
       function stopDefAction(evt) {
    evt.preventDefault();
 }
 document.getElementById('my-checkbox').addEventListener( 'click',    stopDefAction, false );

 <!-- Button to open the modal login form -->
<button id="button1" onclick="document.getElementById('id01').style.display='block'" action="login.php">Login</button>

Answer 1

提交使用AJAX的 ..这将使您能够发布表单get，获取响应并根据需要更新UI，而无需刷新页面...

var xhttp = new XMLHttpRequest();

http.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // get response here and perform any UI actions
    }
  };
  xhttp.open("method", "filename", true);
  xhttp.send();