how to use ajax/jquery to call php from javascript on a wordpress html page

Question

I have written some PHP that successfully extracts a value from a JSON GET request (via URL with API key through an external service called 'teledu Pino').

How can I refresh that number from my WordPress page (by a button or automatically every x seconds etc) (without refreshing the whole page)? Because extracting the variables needs PHP, which is no longer active once the page has loaded. So I need to call the PHP from javascript using ajax (preferably with jquery). I get that. But after many days of trying relevant solutions from this site and others, I still don't know how to get the code right, and what needs to be separate files and where to put them exactly. Since I'm using WordPress, maybe I need to write a plugin? There must be a simple way to use ajax for this.

Here's what I do know : I have to enqueue the jquery. (as Wordpress already has jquery) > wp_enqueue_script('jquery');

I have to write a simple ajax call to the PHP with javascript (don't know if I can do this on my HTML page or it has to be a separate file uploaded to the templates folder(?)

The PHP file looks something like this :

ob_start();
$curl_handle=curl_init();
curl_setopt($curl_handle, CURLOPT_URL,'http://us01.proxy.teleduino.org/api/1.0/328.php?k={MY_API_KEY_HERE}&r=getAnalogInput&pin=14');
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Your application name');
$Aresults = curl_exec($curl_handle);
curl_close($curl_handle);
$Adata = json_decode($Aresults, true);
$Amess = $Adata['message'];
$Astat = $Adata['status'];
$Amoisture = $Adata['response']['values'][0];
$Atime = $Adata['response']['time'];
echo $Amoisture;
echo " : ";
echo $Astat;
echo " : ";
echo $Amess;
if ($Amess == "Key is offline or invalid.") {
echo "[div class=\"cooo\"] Spike is sleeping [/div]";
} 

etc. etc.

This PHP file needs to be saved with a unique name and then the ajax can call it, but I just can't seem to get it right.

The JSON get request response from the 'teleduino' is in this form :

{"status":403,"message":"Key is offline or invalid.","response":[]}

When it is online then it has a number value at the end (that I am successfully extracting with the PHP code on initial page load). I just don' t know how to call that PHP from the javascript. The only way I could get the number displayed on the web page was by installing an "allow php on pages and posts" plugin, then writing the PHP code on the page. But of course, I need a way to refresh that number with javascript / ajax.

The url that sends the get request is like : http://us01.proxy.teleduino.org/api/1.0/328.php?k= {MY_API_KEY_HERE}&r=getAnalogInput&pin=16 (pin=16 is the pin on the micro-controller that has the voltage measurement).

Any ideas or help at all would be really appreciated - THANK YOU !!! :)

Answer 1

jQuery.ajax({
    url: 'url_to_php_script.php?key=' + key,
    type: "GET",
    dataType: "json",
    success: function(data) {
        // In here you can manipulate the json data
        // if you wanted to update a label you could
        // give it an id and do something like this:
        jQuery('#id').val(data[0].identifier)
    }
});

In the php script you would do whatever logic you already do with that key.

$key = $_GET['key'];
// Logic and create array '$result'
$jSonData = json_encode($result);
header('Content-Type: application/json');
echo $jSonData;