Good day! Web programming began to study relatively recently. During this time managed to study good PHP, HTML, CSS, Javascript and a little bit just a little JQuery. In practical programming sites faced with the need for dynamic things for the site that would work without reloading the page. As we know this can not be achieved with PHP. Therefore he turned his attention to the JavaScript and JQuery.

Tell us a little about the interaction of PHP with JQuery and JavaScript. How is the data exchange, if such need arises. For example there is an element of “Like” (heart), which marks sympathy to the reader to the article, he did clicks and triggered JQuery-code – without refreshing the page must add the value of the new “Laika”, then it is increased by one value must be added to the database, ie the means written in PHP Mysql. How things are implemented? Tell us …

I watched this article PHP library for jQuery and many do not understand. Accessible language to explain how there is a bunch of freyvorka JQuery or even just pure JavaScript with PHP. I would be grateful for an answer.

Answer 1, Authority 100%

It is very simple. With the help of AJAX ($ .ajax () in jQuery or XMLHttpRequest pure JS) sends a request to the server. In this case, the page is not reloaded. From the point of view of the server request absolutely similar requests sent when linking or by entering the address in the address bar. Here is an example on jQuery:

On the client:

$. Ajax (
  type: 'GET', // type of request
  url: 'test.php', // send the request to the test.php page
  data: {name: 'Ivan'}) // data that will be transmitted with the request
  .done (function (data) {// declare a handler for the received data
    Alert (DATA);
  })
  .fail (function () {// declare a handler for errors
    alert ( 'error');
  }

On the server (test.php):

echo 'Hello,'. $ _GET [ 'name']

At start AJAX-query request sent to the background test.php? Name = Ivan , received response ('Hello, Ivan' ), which will be transmitted to the handler done .

On a pure JS code would look a bit more cumbersome:

var xhr = new XMLHttpRequest ();
var params = 'name = Ivan'
xhr.open ( 'GET', 'test.php?' + params, true); // the last option - whether to make an asynchronous request. If the request is asynchronous, it will hang up page as long as the answer is not coming
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {// request completed
    if (xhr.status == 200) {// code 200 - successfully
      alert (xhr.responseText);
    } else {
      alert ( 'error');
    }
  }
};
xhr.send (null); // passed as a parameter to the data sent to the server. For GET-requests parameter is null, for POST-search - the data to be transmitted to the server.

In this way, the server can receive any data. If the data is – part of the HTML-markup, they are sent in a pure form. If the data have the form of any object, then they are sent to the client in the form JSON . PHP associative array with any degree of nesting can be easily converted into JSON function json_encode . On the client, you need to convert a string to an object received. This is done by JSON.parse function () .