表单提交上的jQuery Ajax循环

Question

Ajax 新手，但是，我不知道哪里出了问题，我认为它是 Javascript。我的 php 页面运行良好，但是，使用此代码，我的登录 Html 只是一遍又一遍地刷新，url 的末尾更改为 ?username=whatIenter&password=whatIenter

JAVASCRIPT

 <script type="text/javascript">

      $(document).ready(function() {
        $('#login_form').submit(function(e) {
          e.preventDefault();
          $.ajax({
             type: "POST",
             url: '/lib/login.php',
             data: $(this).serialize(),
             success: function(data)
             {
              alert("WORKED");
             }
         });
       });
      });

  </script>

HTML

<form id="login_form" action="" method="POST">
      <input type="text" id="user" name="username">

      <input type="password" id="pass" name="password">

      <button id="loginButton" class="login_submit" type="submit" >Login</button>
  </form>

Answer 1

首先，您使用的是哪个 jQuery 版本？

您的代码在 jQuery 3.3.1

上运行良好

始终牢记以下良好做法：

1. 开发时禁用浏览器缓存
   • 每次您想检查您的网站时，打开浏览器控制台，然后按 F5
2. Javascript 代码总是需要停留在 body 标记内的底部（就在 /body> 之前）
   • 这也适用于您将其放在单独文件中的情况（推荐）
3. 在表单上设置 action 参数，这样可以防止出现意外错误
   • 即使你要调用相同的文件或 url

Answer 2

试试：

var header =  {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
    };

var request = $.ajax({
        url:   '/lib/login.php'
        ,data: $(this).serialize(),
        ,headers: header
    });


request.done(function(response) {
      alert("WORKED "+response);
    });

问题是，一些/大多数 API 将要求您在返回您的 Javascript 将读取的“标准”HTTP 响应之前明确指定内容类型。

资源：

https://web.archive.org/web/20210816145541/https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST