Question

我登录表格

<div class="col-sm-4">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Form1"><strong>Admin</strong></a></li>
    <li><a data-toggle="tab" href="#Form2"><strong>Librarian</strong></a></li>
  </ul>
  <div class="tab-content">
    <div id="Form1" class="tab-pane fade in active">
      <form>
        <div class="form-group">
          <input type="text" class="form-control" id="adminUserName" placeholder="UserName"/>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="adminPassword" placeholder="Password"/>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-lg " id="admin-login">Log In</button>
        </div>
      </form>
    </div>

这是登录的ajax请求

$("#admin-login").click(function(){

    var data = {"username": $("#adminUserName").val(), "password": $("#adminPassword").val()};
    $.ajax({
        url: "/api/admin/login",
        type: "POST",
        dataType: "json",
        data: JSON.stringify(data),
        success:function (data) {
            if(data.success)
            {
                window.location= "/admin.html";
            }
            else
            {
                alert(data.message)
            }
        }
    })
});

登录工作成功，我确定ajax请求已完成，但有时当我点击登录按钮时，问号会出现在网址中，并且它似乎只是刷新页面，例如：登录页面应该带我到localhost：8080 // index.html但有时带我到localhost：8080 //？为什么会这样？我怎样才能解决这个问题。

Answer 1

这是因为表单中的按钮类型为submit。这导致您的提交被提交，并且在提交表单时，它会重新加载页面。

将其更改为button

 <button type="button" class="btn btn-lg " id="admin-login">Log In</button>

或者您也可以阻止js表单的默认提交行为，例如

var form = document.querySelector("form");;

form.addEventListener("submit", function(event){
   event.preventDefault()
});

登录时{ur}中的问号

1 个答案: