PHP和AJAX-无需刷新即可将数据提取到另一个页面并使其模态化

Question

我有两个浏览器，并且正在将数据提取到另一个浏览器，我设法不刷新就获取了数据，但是我想使数据以modal的形式获取，并且现在我发布时不会显示另一页模式上的数据。请帮助

这就是我想要的，请看这张图片

这是我的 Ajax4.html -左侧浏览器

我的 按钮以插入数据

 <button type="submit"  value="Submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">POST TO AJAX 5</button>

我的 脚本

   <script>
    document.getElementById('button').addEventListener('click', getName);

    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

我的div数据将在何处

<h1>Alert User</h1>
    <div id="users"></div>

我的脚本-这是模态应该显示和显示的地方。

<script>
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 +=  '<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                              '<div class="modal-dialog" role="document">' +
                                '<div class="modal-content">' +
                                 ' <div class="modal-header">' +
                                  ' <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>' +
                                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                                     ' <span aria-hidden="true">&times;</span>' +
                                  '  </button>' +
                                 ' </div>' +
                                 ' <div class="modal-body">' +

                                  '<h5 class="card-title">' +users[i].id+ '</h5>' +
                                  '<p class="card-text">' +users[i].name +'  </p>' +

                                 ' </div>' +
                                 ' <div class="modal-footer">' +
                                  ' <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' +
                                   ' <button type="button" class="btn btn-primary">Save changes</button>' +
                                  '</div>' +
                                '</div>' +
                              '</div>' +
                            '</div>';

                }

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

        xhr.send();
  }

</script>

我的process.php是我连接并获取数据的地方

   <?php
//Connect to a database
$conn = mysqli_connect('localhost','root','','ajaxtest');



echo 'Processing....';

//Check for POST variable

if(isset($_POST['name'])){
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    //echo 'GET: Your name is '. $_POST['name'];

    $query = "INSERT INTO users(name) VALUES('$name')";

    if(mysqli_query($conn, $query)){
        echo 'User Added...';
    }else{
        echo 'ERROR: '.mysql_error($conn);
    }
}



//Check for GET variable

if(isset($_GET['name'])){
    echo 'GET: Your name is '. $_GET['name'];
}

我的users.php是我连接数据库的地方

    <?php 

//Create Connection
$conn = mysqli_connect('localhost','root','','ajaxtest');

$query = 'SELECT * FROM users';

//Get Result
$result = mysqli_query($conn, $query);

//Fetch Data
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);

echo json_encode($users);