Question

但是，对于Ajax的新手，我无法弄清楚出了什么问题，我认为它是Javascript。我的php页面工作得很好，但是，使用此代码我的登录Html只是一遍又一遍地刷新，网址的末尾更改为？username = whatIenter＆amp; 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会要求您在返回＆＃34;标准＆＃34;之前明确指定内容类型。您的Javascript将读取的HTTP响应。

资源：

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

Answer 2

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

您的代码与 jQuery 3.3.1

一起正常运行

始终牢记这一良好做法：

开发时禁用浏览器上的缓存
- 每次要检查您的网站时，请打开浏览器控制台，然后按F5
Javascript代码始终需要保留在 body 标记内的底部（就在＆lt; / body ＆gt; 之前）
- 这也适用于您将其放在单独文件（推荐）上的情况
在表单上设置操作参数，这可以防止意外错误
- 即使您要拨打相同的文件或网址

表单提交上的jQuery Ajax循环

2 个答案: