Changing content without reloading the page [closed]

Closed. This question should be specified . Answers to it are not accepted at the moment.

Want to improve this question? Reformulate the question so that it focuses on only one problem.

Closed 4 years ago.

Improve the question

Hello. There is cms amxbans how to change the content without reloading the page, output from other files.

Author: zb', 2013-06-25

2 answers

Look away - JavaScript, jQuery, Ajax

 4
Author: Konstantin Choporov, 2013-06-26 12:00:11

To do this, you need to use AJAX requests.

The code I use for this purpose:

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
echo "Тестовая переменная: ".$_GET['testvar'];
?>

You can add an unlimited number of variables. You can change the content by forcing the PHP script to return the html code, and later change the innerHTML of a block to response. This option is the simplest. There is an option more complicated, with JSON, but that's another question.

 0
Author: Крендель, 2016-12-11 10:02:37