Get a simple JSONP object from a remote server php file using ajax (and jquery) embedded in javascript directly in my wordpress page

Question

I have some php written on a static wordpress page (using the include-php-in-pages-and-posts plugin) that gets a JSON object from a remote server. This of course just works once on page load, and then never again (as it is not ajax).

But as the call is sent to a server with its own php and through an API url call, then I'm sure there is no need for my php and there must be a simple bit of ajax (possibly using jquery) that I can write directly on my html wordpress page that gets the JSON object from a remote server, all just with the javascript I'm using directly on my pages.

(I imagine it would use the JSONP format as it is from a remote server) - something like :

$.get( "my_url.php_with_API-KEY_etc", data, success, "jsonp" );

or

$.getJSONP("my_url.php_with_API-KEY_etc"

As you can see, I'm a bit lost. Is this too "beginner" a question for this this forum? Or can anyone help?

If it's too beginner, any tutorial suggestions? (I have tried all the ones from first 3 pages that come up on google). I'm feeling this is such a simple request it should't be this hard.

The php code (that works only page load as I use it through the 'included-php-on-pages-and-posts' plugin) is :

[php]
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');
$results = curl_exec($curl_handle);
curl_close($curl_handle);
$data = json_decode($results, true);
$mess = $data['message'];
$stat = $data['status'];
$moisture = $data['response']['values'][0];
$time = $data['response']['time'];
[/php]

Been struggling for many days, read hundreds of other related answers, but no answer seems to simply explain how I do this with ajax/jquery and js alone for wordpress. Thank you in advance.

Answer 1

I'd solve this creating a Shortcode Plugin to handle this specific case. What a plugin like include-php-in-pages-and-posts does is a Shortcode. And what you're trying is too complex to be laying together with the HTML content (and all sorts of code mangling can happen inside WP visual/text-editor).

Here there is a full plugin example on How to Use AJAX in a WordPress Shortcode?

• rename the shortcode to your liking, e.g, add_shortcode( 'teleduino', array( $this, 'shortcode') );.

• your actual PHP code has to be adapted into the methods shortcode() and get_random_posts(). This get_random_posts() would be your get_teleduino_response() and responsible exclusively for getting the response and returning the data or an error message. Then in shortcode() you process the result and do the actual output.

• the Shortcode also outputs a button that triggers the Ajax call that executes get_random_posts() again in query_rand_post().

• in sum, you gotta adapt this three methods (functions inside a class) to your logic.

• I think you can drop the ob_start and send the response back to jQuery with wp_send_json_success( $results );, or do some pre-processing of the result and send back only relevant info

• maybe instead of cUrl, you could use wp_remote_get()