Successful AJAX call on working PHP script returns nothing

Question

I'm running a script which is supposed to send a user ID number to a database. The database grabs a bunch of image IDs from whichever row has the matching user ID, then goes to a different table and grabs the image URLs which match the image IDs. Then it returns the URLs.

The PHP script runs fine on its own, it returns the correct URL in either straight text or JSON, as requested.

As for the jQuery, the AJAX call does indeed get to the success function, because I can ask it to document.write something there and it will do it. When I ask it to print out the data, however, the AJAX call runs forever (I think it is repeatedly calling the success function? Based on the browser telling me that it is either waiting or transferring data repeatedly). Regardless, nothing is printed to the screen despite the repeating script.

Oh, also, no errors are returned to the console.

I am not sure why it is doing this and so here I am. I've browsed through the other posts here and randomly on the internet, with no luck. Any help is appreciated!

Here is the PHP:

<?php
header('Content-type: text/plain; charset=utf-8');
// define variables and set to empty values
$servername = "localhost";
$username = "root";
$password = "Wolf*6262";
$dbname = "Game";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "GET") {
  $id = $_GET["id"];
}

$query1 = mysqli_query($conn, "SELECT imageids FROM users WHERE id = $id");

// Start user session
if ($imageIds = mysqli_fetch_array($query1)) {
    fetchUrls($imageIds, $conn);
} else {
    echo "Fail";
}

function fetchUrls($imageIds, $conn) {
    $query2 = mysqli_query($conn, "SELECT url FROM charimages WHERE id = '1'");
    $array = mysqli_fetch_assoc($query2);
    $url = $array["url"];
    exit($url);
}

$conn->close();

The jQuery:

function getUrls (userId) {
    $.ajax({
        type: 'GET',
        data: {id:userId},
        URL: 'fetchChar.php',
        async: false,
        dataType: 'text',
        success: function (data) {
            document.write(data);
            document.write(userId);
        }
    });
}

Aaand here's where I define userId and call getUrls, it's in a separate HTML file:

var userId = <?php echo $_SESSION["id"]; ?>;
$(document).ready(getUrls(userId));

Answer 1

Can you please modify your script: as standard way what prefer from jQuery: 1. Change URL to url 2. Please avoid async defining Like this

$.ajax({
    type: 'GET',
    data:{ id: userId },
    url: 'fetchChar.php',
    // async: false,
    dataType: 'text',
    success: function (data) {
        console.log(data);
        //document.write(data);
        //document.write(userId);
    }

});

I added console log to show the return data, so that you can make sure that your data is returning correctly from fetchChar.php file using console log.

Answer 2

Ended up doing the following, question solved:

Javascript file:

$.ajax({
    type: "POST",
   dataType: "json",
   url: "fetchChar.php",
   data: {id:userId},
   success: function(data) {
    document.write(JSON.stringify(data));
   }
});

PHP file, near the end:

function fetchUrls($imageIds, $conn) {
    $query2 = mysqli_query($conn, "SELECT url FROM charimages WHERE id = 1");
    $array = mysqli_fetch_assoc($query2);
    $url = $array['url'];
    $url = json_encode($url);
    echo $url;
    exit();
}