表單提交中的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. 在表單上設置操作參數，這可以防止意外錯誤
   • 即使您要調用相同的文件或網址