JS 检测不到表单提交

Question

 $(document).ready(function() { $("#loginForm").on('submit', function() { var mail = document.getElementById("mail").value; var password = document.getElementById("password").value; req = $.ajax({ url: '/api/login', type: 'POST', data: { email: email, password: password } }); req.done(function(data) { if (data.result == "failed") { let messageHandler = document.getElementById("message-handler"); messageHandler.innerHTML = `<h3> username or password incorrect </h3>`; } }); return false; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" method="POST"> <input type="mail" id="mail" name="mail"> <input type="text" id="password" name="password"> <input type="submit" id="loginForm"> </form> <div id="message-handler"> </div>

When I click the button, it simply says Method not allowed because I am sending a post request from form. The js never detects the on submit event.

Thanks

Answer 1

What happens here in /api/login? Try to point a file like form.php or something else.

req = $.ajax({
      **url: '/api/login',**
      type: 'POST',
      data: {
        email: email,
        password: password
      }
    });

Maybe this is the path you need to follow for your answer;)

Answer 2

Use action='url' Or action='#' this will help to detect your request in browser.