我的AJAX代码有什么问题

Question

I am brand new to the world of AJAX. I have a Mysql database that contains a column filled with URLs. My end goal is to have an on click event load an iframe with a unique URL from the database. If anyone has a better methodology please let me know.

Right now however I'm just trying to figure out how AJAX works by trying to retrieve the URLs. I've attached my Javascript code and my PHP code.

The PHP code does output a json encoded copy of the data. The javascript however reports the variable result as undefined. I think this may have to do with the "asynchronous" side of AJAX but I followed this tutorial to try to make code work correctly. I appreciate any help that can be provided.

How do I return the response from an asynchronous call?

Here is my code Javascript code it logs results is undefined and "I made it" to the console

function retrieve_callback(result) { 
    console.log (result);
    console.log("I made it!");
    };

function retrieveURL (retrieve_callback) {  
    $.getJSON({
        url: './fetch.php',
        dataType: 'json',
        success: retrieve_callback
    });
}

//Runs when our document initializes
$( document ).ready(function() {
    retrieveURL(retrieve_callback());
});

Here is my PHP code it outputs the JSON array of the URLs

<?php
//--------------------------------------------------------------------------
// Connect to mysql database (I've removed the info from this example but it works)
//--------------------------------------------------------------------------

$db = new mysqli($DB_HOST, $DB_USER, $DB_PASSWORD, $DB_NAME);

if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']');
}

//--------------------------------------------------------------------------
// Query mysql database
//--------------------------------------------------------------------------

$links = array();

//SQl query
$sql = <<<SQL
    SELECT `Gnews_url`
    FROM `Gnews_RSS`
SQL;

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']');
}

while($row = $result->fetch_assoc()){
    array_push($links, $row);
}

echo json_encode($links);

Answer 1

retrieveURL(retrieve_callback()); is incorrect.

retrieveURL is expecting you to pass a function reference so it can execute it once the request completes. Instead, you're executing retrieve_callback and passing the result of that ( undefined ) to retrieveURL , so it never actually does anything when the request completes. Not only that, but you're executing the callback before you make the request.

You should pass it like:

retrieveURL(retrieve_callback);

Answer 2

This:

$( document ).ready(function() {
    retrieveURL(retrieve_callback());
});

You are calling retrieveURL with the RESULTS of calling retrieve_callback(). Do this instead:

$( document ).ready(function() {
    retrieveURL(retrieve_callback);
});

Answer 3

retrieveURL(retrieve_callback); // no brackets for retrieve_callback

In Javascript, methods are objects too. In this case you are passing the method retrieve_callback as object into retrieveURL. retrieveURL on the other hand does assign the method retrieve_callback as the member "success" to a anonym object which is passed into $.getJSON(). This means that the anonym object does now have a method called "success" which works like retrieve_callback.

After the successful AJAX request, jquery uses the anonym object and calls its success-method like this:

blaObject.success(ajaxResult);

We know that "success" is a copy of "retrieve_callback", so the follwing will happen:

// instead of blaObject.success(ajaxResult);
retrieve_callback(ajaxResult);

Let's explain it in a short way (see se usage of the brackets):

// Get the result of a call of retrieve_callback() and pass it to retrieveURL.
retrieveURL(retrieve_callback());

// Pass the method retrieve_callback itself  retrieveURL.
retrieveURL(retrieve_callback);