To organize interactive communication between a visitor and a website (or rather, a browser with a web server), the programmer needs to provide scenarios for the exchange of data between them. Let's consider several simple options for organizing the transfer of variables from the client JavaScrip script to the server PHP script and vice versa.
It is necessary
Basic knowledge of PHP, JavaScript and HTML languages
Instructions
Step 1
At the stage of page formation, it is not difficult to transfer a variable along with its value from a php script to a JavaScript script. The PHP script itself generates the HTML code of the requested page, including the scripts it contains. This means that he can write any variables into the JavaScript code that should be passed along with their values. For example, this php script will pass to the client script a variable named "serverTime" containing the current server time in the format HOUR: MINUTE:
<? php
$ JSvarName = 'serverTime';
$ JSvarValue = date ('H: i');
$ JScode = $ JSvarName. '= "'. $ JSvarValue. '";';
print ''. $ JScode.'alert ("And on the server now" + '. $ JSvarName.'); '
?>
Step 2
The simplest way of passing the names and values of variables in the opposite direction (from the JS script in the client's browser to the PHP script on the web server) can look like this in the HTML code of the page:
var now = new date ();
var varName = 'clientTime';
var varValue = now.getHours () + ":" + now.getMinutes ();
window.location.href = 'https://sa/test2.php?' + varName + '=' varValue;
This script will send to the script test2.php the name of the "clientTime" variable and its value, which contains the current computer time in the same HOUR: MINUTE format. This method of transferring data is called "synchronous" - it will result in an immediate page reload. More precisely, instead of the current page, the result of the test2.php script will be loaded into the browser. The code for this php script might look like this:
<? php
if ($ _ GET) echo 'Received variable'.key ($ _ GET). '='. $ _ GET [key ($ _ GET)];
?>
You can combine all three considered parts of the code for passing variables from the server to the browser and back into one php file like this:
<? php
if ($ _ GET) echo 'Received variable'.key ($ _ GET). '='. $ _ GET [key ($ _ GET)];
$ JSvarName = 'serverTime';
$ JSvarValue = date ('H: i');
$ JScode = $ JSvarName. '= "'. $ JSvarValue. '";';
print ''. $ JScode.'alert ("And on the server now" + '. $ JSvarName.'); '
?>
function sendData () {
var now = new date ();
var varName = 'clientTime';
var varValue = now.getHours () + ":" + now.getMinutes ();
window.location.href = "https://sa/test2.php?" + varName + "=" + varValue;
return false;
}
Send Data to Server In this combined (PHP + JavaScript) script, the php code will generate JavaScript code by "passing" a variable named "serverTime" with a value containing the current server time. When the page is loaded into the browser, the JavaScript script will display a message with this time. Then the user clicks on the "Send data to server" link will launch the sendData () function, which will send a GET request to the server, passing the variable name ("clientTime") and its value (client time) to the php script. A php script, having read the name and value of a variable from the $ _GET superglobal array, will print it and start the entire described script again.
Step 3
Everything described above implements the scenario of "synchronous" data transfer. The implementation of the "asynchronous" method of exchanging data between client and server scripts has its own name AJAX (Asynchronous Javascript and XML). This topic deserves a separate article.
