jQuery - AJAX POST Request is giving a 500 Internal Server Error

Question

So like this post's title says, I'm sending a POST request via jQuery's AJAX method. However, the PHP code it runs does indeed run. Everything in the PHP code works as it should. The only issue is that it's not returning a success in order to run the success function.

Client-Side JS Code:

<script>

            function commandUpdate(command, action, element) {
              $.ajax({
                type: "POST",
                url: "update/commands.php",
                data: {id: window.location.href.split("?id=").slice(1).join("?id="), type: "NA", command: command, action: action, value: document.getElementById(command + "Text").value},
                success: function() {
                  document.getElementById(element).innerHTML = "🗸"
                  location.reload()
                }
              })
            }

</script>

Server-Side PHP Code:

<?php

  $connection = mysqli_connect("myIP", "user", "pass", "dbName");

  $loginID = $_POST["id"];
  $type = $_POST["type"];
  $value -> command = str_replace("\"", "\\\"", $_POST["command"]);
  $value -> action = str_replace("\"", "\\\"", $_POST["action"]);
  $value -> value = str_replace("\"", "\\\"", $_POST["value"]);
  $value = json_encode($value);

  mysqli_query($connection, "INSERT IGNORE INTO requests (loginID, category, type, value) VALUES ('$loginID', 'commands', '$type', '$value')");

  mysqli_close($connection);

 ?>

All of it works, except for the fact that the console has the 500 Internal Server Error and the success: function() {//code} part isn't being executed. Is there something that I'm missing here?

Answer 1

500 Code means something isn't working on the server-side. I had a similar situation where a different server than my own gave this problem even though it provided all of the information itself and seemed to work well.

I couldn't resolve the 500 error, so eventually just put an always() listener on the call and conditioned 200 and 500 codes along with expected data structure.

since you're not storing the call in a var. you can do it like this:

function commandUpdate(command, action, element) {
          $.ajax({
            type: "POST",
            url: "update/commands.php",
            data: {id: window.location.href.split("?id=").slice(1).join("?id="), type: "NA", command: command, action: action, value: document.getElementById(command + "Text").value},
            success: function() {
              document.getElementById(element).innerHTML = "🗸"
              location.reload()
            }
            statusCode: {
                200: function(){
                         document.getElementById(element).innerHTML = "🗸"
                         location.reload()
                     }
                500: function(){
                         document.getElementById(element).innerHTML = "🗸"
                         location.reload()
                     } 
            }
          })
        }

or chain it:

 $.ajax({
     /*options*/
  }).always(function(data){
       if(data.statusCode === 200 || data.stausCode === 500){
           /*Do things with data*/
       } 

  });