Search code examples
phpjqueryajaxamazon-ec2lampp

Ajax calls executed via jquery to a PHP script don't work


I have an application in an EC2 instance in AWS, using a classic load balancer, LAMPP server running Apache2 and some of my ajax calls to my php files, hosted in a folder in the same instance, don't work. But what is odd is that some calls work, and some doesn't. For exemple, I have a page of a supermarket that loads the data of the supermarket (name, address, phone) from the server (using a PHP file to access the MySQL database and returning a json) but doesn't load the products of the store. But if I use the search field, that makes a call to a different PHP file (but that is very similar to the one responsible for returning all the products with the difference that have a where clausule on the MySQL that specifies the product name) than it works perfectly.

Another exemple is the call to list all the cities of a state, when the user chooses a state in a select field. It doesn't work. Here is the code that I use to make the ajax call:

$("#state").change(function() {

    var idState = $(this).val();
    $("#cities").text("");

    $.ajax({

        type: "POST",
        url: "https://myurl.com/server/consultations/find-cities.php",
        data: {
            idState: idState,
        },
    }).done(function(response) {

        var obj = $.parseJSON(response);
        var field = $("#modal-change-city").find("#cities");
        var option = $("<option>").attr("selected", "true").attr("disabled", "true").text("City");

        field.append(option);

        obj.forEach(function(index) {

            var cityResponse = index[0];
            var select = $("#modal-change-city").find("#cities");

            var city = $("<option>").attr("value", cityResponse).text(cityResponse);

            select.append(city);
        });
    });
});

And this is the PHP file find-cities.php:

<?php require_once("../connection.php");

header("Access-Control-Allow-Origin: *");

$id_state = mysqli_real_escape_string($connection, $_POST['idState']);

$query = "SELECT name_city
            from cities_tb
            where id_state = $id_state";

$con = mysqli_query($connection, $query);
$response = array();

while ($data = $con->fetch_array()) {

    array_push($response, $data);
}

echo json_encode($response);
?>

When I just run the php script, going to its URL, it gives me error 500, what is normal. I tested my application on 000webhost before using the AWS and this error also happens when I tried to access the URL directly, but the ajax call works on 000webhost.

When I put an id directly no the $id_state instead of the post data, I keep getting no response on the ajax, but when I go to the URL, I got a page all white, that doesn't show the json on the echo, but also shows no errors. If I change the echo json_encode($response) to a var_dump($response) I got a page with the array $response, with all the cities of that state. But still nothing on the html page that made the ajax request.

I never actually got an error, I just got no response and then the console shows Uncaught SyntaxError: Unexpected end of JSON input, due to the fact that the ajax code kept running, got no response, and so it wasn't able to parse the json file it expected to receive. When I try a console.log(response), it just shows the file and line in which I wrote the console.log code and nothing on it, as it got no answer.

And my guess is that there might be something wrong with the URL call. Or maybe because of the use of load balancers, or maybe the URL I'm calling should be different. I tried using localhost or the ip but, since it's a https page, it doesn't accept calls to http URLs. When I put the https before the localhost or IP, it gives me the error 500. I tried also to point to the directory of the PHP file on the URL, but it also didn't work.

And also, I need to make the calls to the full URL, because I need to make it work on a cordova application for Android and iOs too.

The directories are organized like this (some folders and files, that aren't important in this issue, were ommited):

/var/www/html
|-js
|-css
|-img
|-all the .html files
|-server
    |-consultations
        |-find-cities.php
        |-other .php files (including the ones of the supermarket)
    |-other folders
    |-connection.php

And just for the record: I tested all of it on 000webhost before and all worked fine, even on the cordova application, and using the same directory organization and files.


Solution

  • The problem was in the MySQL database. The charset and collation weren't UTF-8 and so the requests that had special characters, such as ã, é or ç weren't working, while the requestas that didn't had special characters were working.