0

I am attempting to build a simple Login page that utilizes jQuery Ajax using a database and table with saved username and password in a local development environment: XAMPP on Mac.

I will admit I'm a bit rusty when it comes to Ajax and perhaps that's the biggest issues so please be kind: Everytime I click to submit Ajax request I get a jquery-3.6.0.min.js:2 POST http://localhost:8080/checkUser.php 500 (Internal Server Error) in the Chrome's Console. The checkUser.php is contained in the same folder as the HTML form.

I have tested my connection to the database via php so I feel the issue lies in the javascript for some reason not able to connect to the Ajax URL.

I appreciate whatever help you can offer. My apologies at the length of this code. I shall post my code:

Basic HTML Form

<div class="container">
<div id="div_login">
  <h1>Login</h1>
  <div id="message"></div>
  <div>
    <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username">
  </div>
  <div>
    <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password">
  </div>
  <div>
    <input type="button" value="Submit" name="but_submit" id="but_submit">
  </div>
</div>

My jQuery Ajax Call

$(document).ready(function() {
  $("#but_submit").click(function() {
    var username = $("#txt_uname").val().trim();
    var password = $("#txt_pwd").val().trim();
    if (username != "" && password != "") {
      $.ajax({
        url: 'checkUser.php',
        type: 'post',
        data: {
          username: username,
          password: password
        },
        success: function(response) {
          var msg = "";
          if (response == 1) {
            window.location = "home.php";
          } else {
            msg = "Invalid username and password!";
          }
          $("#message").html(msg);
        }
      });
    }
  });
});

My checkUser.php

<?php
session_start();
$host = "localhost";
$user = "root";
$password = "";
$dbname = "users";

$con = mysqli_connect($host, $user, $password, $dbname);
if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

$uname = mysqli_real_escape_string($con, $_POST['username']);
$password = mysqli_real_escape_string($con, $_POST['password']);

if ($uname != "" && $password != "") {
    $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
    $result = mysqli_query($con, $sql_query);
    $row = mysqli_fetch_array($result);

    $count = $row['cntUser'];

    if ($count > 0) {
        $_SESSION['uname'] = $uname;
        echo 1;
    } else {
        echo 0;
    }
}

Chrome Throwing the Internal Server Error 500 Chrome Throwing the Internal Server Error 500

stefmikhail
  • 6,877
  • 13
  • 47
  • 61
  • 1
    First you need to find the reason for the 500 error. Make sure PHP error logging is on, then run the code and check the log file. Once you get a more detailed error you'll have a better idea what to do with it. A 500 just tells you the server code crashed...it (purposely) doesn't tell you _why_ it crashed – ADyson Aug 01 '21 at 17:44
  • 1
    First step is to debug for 500 server error which you can see when you click on that failed request link. Second is to use PDO for querying such things and storing hashed passwords in the DB – nice_dev Aug 01 '21 at 17:48
  • Forgive my ignorance, and I am currently researching tools to debug a generic 500 error, but if you have any suggestions it would be greatly appreciated. I did run php code and it connected to my database no problem as well as provide me with table information, and it does seem to state the issue lies in jQuery never loading my checkUser.php file. I shall continue to investigate. – stefmikhail Aug 01 '21 at 17:54
  • 1
    Is it the complete code of you `checkUser.php` file? By the way if you see this in the `Network` tab, then a POST was sent to the server, 500 is a response code coming from server side. Usually it means an error in your PHP code. – Peter Koltai Aug 01 '21 at 18:02
  • 1
    Do you have this file: `\xampp\apache\logs\error.log`? – Peter Koltai Aug 01 '21 at 18:03
  • `I am currently researching tools to debug a generic 500 error, but if you have any suggestions`...I already told you what you need to do. Read my comment again. It's easy to find guides which explain how to enable error logging in PHP if you search for that specifically – ADyson Aug 01 '21 at 18:39
  • @PeterKoltai That is indeed the complete code for 'checkUser.php'. In fact usually I just use an include to provide the configuration at the top as an include. I'll check my PHP code and I agree with your logic that if it's a server error, then PHP is probably the culprit: it appeared to me that jQuery was somehow not able to 'Post' the information to the 'URL' in question. But I'll do some PHP debugging in case. – stefmikhail Aug 01 '21 at 18:47
  • @PeterKoltai I do not know where my apache logs would be housed: looking into it but I usually use a Mac and thought I would try XAMPP not knowing it's not locally housed it would seem, rather mounted. Missing MAMP right now although I don't know if that would make a difference. Thank you for the kind suggestion. – stefmikhail Aug 01 '21 at 18:50
  • 1
    It's not your Apache logs you need to look at, it's your _PHP_ logs. https://stackify.com/php-error-logs-guide/ – ADyson Aug 01 '21 at 19:22
  • Just for curiosity I installed XAMPP for Mac. After selecting `General` and `Open Terminal`, I found this file: `/opt/lampp/logs/php_error_log`. Don't know whether is is really the php log but the name suggests it. – Peter Koltai Aug 01 '21 at 19:58

0 Answers0