表单提交中的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

尝试：

    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://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST

Answer 2

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

您的代码在jQuery 3.3.1上运行正常

请始终牢记以下良好做法：

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