How to pass information to and run a PHP script without reloading the page

Question

I am trying to hit the API of a product from within a web interface without interrupting the user, refreshing the page, etc. The webpage runs on a separate server to the main machine, so unfortunately I have had to use PHP to send the command (although would much prefer it happen in JS if that is possible).

Type of commands I am sending:

http://<DEVICE IP>/path/to/api?set&variable=option

What I want to do is send some information to the PHP script and then have it run without changing the page, refreshing, etc. I am struggling to get this right though, I currently have the following:

To make the link:

<a href="JavaScript:void(0);" onclick="function([would like to pass variables here])">Show playback layout</a>

To send the API command in PHP

$ch = curl_init('http://10.0.50.163:9000?layout=Slaves');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$return = curl_exec($ch)

I would like to pass in variables here so I can limit how many times I need to repeat myself. For example, the layout name could be passed from the link being clicked, rather than hard coded into the URL.

I obviously need to write some sort of JS/AJAX function to do this, but as I am a bit of a n00b when it comes to getting JS to do what I want, I am struggling to understand the process. Any help would be enormously appreciated!

Thanks in advance!

Answer 1

I recommend using the jQuery library as it is really slick and saves a lot of time:

http://api.jquery.com/jQuery.ajax/

Also, the url to the resource must be the external url (not 10.0.50.163) because you will be calling it from the client side. So that resource must be exposed to the outside too.