PHP & AJAX - нет обновления на другой странице, когда данные извлекаются

Question

моя текущая программа добавляет данные и вставляет их в базу данных, но я хочу, чтобы я не хотел автоматического обновления на другой странице или в браузере.поэтому у меня есть эти два браузера, как я могу отправить данные на другую страницу без обновления.сейчас идет отправка, но проблема в том, что мне нужно обновить страницу

вот мой код для Ajax4.html

 <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

my Process.php

здесь я подключаю свою базу данных

    <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

моя страница отправки Ajax5.html

здесь, где я получаю данные, и здесь, куда я хочу отправить данные без обновления страницы

<button id="button">Get User</button>
        <br><br>

        <h1>Users</h1>
        <div id="users"></div>

<script>

document.getElementById('button').addEventListener('click', loadUsers);

    function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);

        xhr.onload = function(){
            if(this.status == 200){
                var users = JSON.parse(this.responseText);

                var output = '';

                for(var i in users){
                output += '<ul>' +
                    '<li>ID: ' +users[i].id+'</li>' +
                    '<li>Name: ' +users[i].name +'</li>' +
                    '</ul>';
                }

                document.getElementById('users').innerHTML = output;
            }
        }

        xhr.send();
    }

</script>

Answer 1

Вы можете добавить setInterval для периодического обновления списка пользователей:

var still_fetching = false;

//fetch data every 3 seconds (3000)
setInterval(function(){ 
     if (still_fetching) {
         return;
     }
     still_fetching = true;
     loadUsers();
}, 3000);

//need to update a bit this function
function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);

        xhr.onload = function(){
            if(this.status == 200){
                var users = JSON.parse(this.responseText);

                var output = '';

                for(var i in users){
                output += '<ul>' +
                    '<li>ID: ' +users[i].id+'</li>' +
                    '<li>Name: ' +users[i].name +'</li>' +
                    '</ul>';
                }

                document.getElementById('users').innerHTML = output;
                still_fetching = false;
            }
        }

        xhr.send();
  }