How to organize a block output results online from the database without reloading the page?

Like at http://www.championat.com/. It is necessary that when I would change the match result in the admin panel, the changes occurred immediately in the block on the main page without reloading it.

Closed due to the fact that the question is too general by the participants Alexey Shimansky , aleksandr barakin , user194374, Alex , Grundy 15 Dec '16 at 11:14 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    Nobody will write the finished code to you, this is done using ajax'a ... - Zowie

3 answers 3

The logic is as follows (approximately, jquery library is used):

HTML element with some class <a class="click">Кликни</a>

Javascript code

 $(".click").click(function(){ $.ajax({ url: '/ajax/example.html', // указываем URL и dataType : "json", // тип загружаемых данных success: function (data, textStatus) { // вешаем свой обработчик на функцию success $.each(data, function(i, val) { // обрабатываем полученные данные /* ... */ }); } }); });

And then on the server you already process the request as a simple call.

About ajax you can read here: Ajax

    I would recommend using COMET, Websockets. The fact is that if you want the information to be updated automatically after changing the data using the usual ajax approach, you have to make a database query every second (and didn’t you get new data?).
    Therefore it is necessary to implement using io.sockets, websockets. So that when there is a change in the admin panel, there was a request to all connected clients of the website so that information needs to be updated.

    If there is a dislike for sockets (tobish a constant client connection to the server, where the client and the server listen to each other), then you can use COMET long polling on VKontakte, but in that case you should keep in memory Do not have new data in the database, so as not to pull the database more often than necessary.

      A lot of questions of the same type. Read at least how other people solved similar problems. To do this, use AJAX - requests.

      The code I use for this purpose is:

       function send_request(r_method, r_path, r_args, r_handler) { var Request = false; if(window.XMLHttpRequest) { Request=new XMLHttpRequest(); } else if (window.ActiveXObject) { try { Request = new ActiveXObject("Microsoft.XMLHTTP") }; catch(CatchException) { Request=new ActiveXObject("Msxml2.XMLHTTP"); } } if(!Request) { return; } Request.onreadystatechange=function() { if(Request.readyState==4) if(Request.status==200) r_handler(Request.responseText); if(r_method.toLowerCase() =="get"&&r_args.length>0) r_path+="?"+r_args; Request.open(r_method,r_path,true); if(r_method.toLowerCase()=="post") { Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); Request.send(r_args) } else { Request.send(null) } } }

      Briefly about the arguments:

       send_request("Тип запроса. get либо post","Путь/к/файлу.php","Аргументы. Например: topic=46764&page=4",function(response){ //Код, который будет исполняться при успешном окончании запроса //response - переменная, содержащая ответ })

      A small example:

      test.html

       <html> <head> <script> function send_request(r_method, r_path, r_args, r_handler) { var Request = false; if(window.XMLHttpRequest) { Request=new XMLHttpRequest(); } else if (window.ActiveXObject) { try { Request = new ActiveXObject("Microsoft.XMLHTTP") }catch(CatchException) { Request=new ActiveXObject("Msxml2.XMLHTTP"); } } if(!Request) { return; } Request.onreadystatechange=function() { if(Request.readyState==4) if(Request.status==200) r_handler(Request.responseText); if(r_method.toLowerCase() =="get"&&r_args.length>0) r_path+="?"+r_args; Request.open(r_method,r_path,true); if(r_method.toLowerCase()=="post") { Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); Request.send(r_args) } else { Request.send(null) } } } function request() { send_request("GET", "test.php", "testval=test", function(response) { document.body.innerHTML+=response }) } </script> </head> <body> <button onclick="request()">Загрузить!</button> </body> </html>

      test.php

       <?PHP print_r(mysql_query("SELECT * FROM USERS")) //Например ?>