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*/
       } 

  });

Answer 2

I had this same issue. For me the problem was in the page to which the ajax call was made (calling a function which wasn't available in that page). My suggestion is to go to the page that you are calling in ajax and see the errors in that page. Once you fix that, the ajax call should go through fine.