Javascript XMLHttpRequest 和 Jquery $.ajax 都返回当前页面的 HTML 代码

Question

The problem

Hello i want to start off hoping all of y'all are having a fantastic day! I'm having a really weird problem that i have never came across before. I have a bootstrap navigation form with two fields, an input for a email and a field for the password.

When the user submits the form it calls to an AddEventListener which is waiting for a click of the login button. and after that is called it validates(Server Side Validation) the form of the entered data. After both the email_validated and password_validated is both equal to true it calls to a function called checkLogin(email, password){email = entered email in field, password = entered password in field}. In the checkLogin function it called to a JQuery $.ajax({}) call which sends the email and password field to a php document located in /scripts/checkLogin.php. However instead of it returning "Hello"(For testing purposes) is returns the entire HTML code for the current page(As shown above)

JQuery $.ajax({}) code

Here i have the code for the $.ajax({}) call.

Console

I'm not getting any errors in the console except for the XHR finished loading: POST

Other Pictures

Here are some other pictures that i am including to hopefully give yall a better idea of the structure.

Note

I just want to add that i have checked Stackoverflow for similar problems and other people have had this problem but they solutions did not work on my code. I have also tried just using a regular XMLHttpRequest and the same problem occurred, i'm honestly not sure what is wrong with the code for i have never had this problem before. Thank you for taking the time to read this i appreciate any help that i can get with solving this. I'm not the best with $.ajax({}) or XMLHttpRequest and im willing to make any changed to the code to try to get this to work. Below is my code for the entire javascript validation(server side).

Code

      <form class="form-inline my-2 my-lg-0" method="POST">

        <input class="form-control mr-sm-2 nav-login" type="text" autocomplete="off" placeholder="Email" name="email" value="trest@gmail.com" id="email">

        <input type="password" name="password" autocomplete="off" class="form-control nav-login mr-sm-2" placeholder="Password" value="password" name="password" id="password">

        <button class="btn btn-success my-2 my-sm-0 nr" type="button" name="login_button" id="login_button">Login &nbsp;<i class="fas fa-sign-in-alt"></i></button>

      </form>


      <script>
      document.getElementById('login_button').addEventListener('click', (e) => {
      e.preventDefault();

      // const email_regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

      let email_validated = true;
      let password_validated = true;



      let email = document.getElementById('email');
      let password = document.getElementById('password');

      // let email_length = email.value.length;
      // let password_length = password.value.length;




      //
      //
      // if(!email_length){
      //   email.classList.add('is-invalid');
      // }else{
      //   if(!email_regex.test(email.value)){
      //     email.classList.add('is-invalid');
      //   }else{
      //     email.classList.remove('is-invalid');
      //     email.classList.add('is-valid');
      //     email_validated = true;
      //
      //   }
      // }
      // if(!password_length){
      //   password.classList.add('is-invalid');
      // }else{
      //   password.classList.remove('is-invalid');
      //   password.classList.add('is-valid');
      //   password_validated = true;
      // }


      if(email_validated === true && password_validated === true){
        checkLogin(email.value, password.value);
      }
    });
    function checkLogin(email, password){
      $.ajax({
        type: "POST",
        url: '/scripts/checkLogin.php',
        data: {
          'email': email,
          'password': password
        },
        contentType: "application/json; charset=utf-8",
        success: (result) => {
          alert(result);
        }
      });
    }
</script>

Links to the other StackOverFlow question

ajax returns the html code of current page instead of json

Answer 1

正如 t.niese 所说，我是用 xammp 配置我的服务器的方式。