PHP & AJAX - 获取到另一个页面并将其作为模态发送时不刷新数据

Question

我现在在不刷新的情况下将数据发送到另一个页面，但我的问题是模式，我无法将其作为模式发送，但我可以将数据发送为文本。为什么 ？

这是我页面的图片

这是我的代码

对于 ajax4.html

This is where I submit data and perform inserts


<h1>AJAX POST FORM</h1>

    <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

这是我获取数据的地方，也是我要显示模式的地方

**EDIT** here is my current HTML 


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


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User List</h4>
      </div>
      <div class="modal-body" id="user-list">
        <p>User list here</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<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 id="myModal" class="modal">' +    
                    '<div class="modal-content">' +
                        '<span class="close">&times;</span>' +
                        '<p>'+users[i].id+'</p>' +
                        '<p>'+users[i].name+'</p>' +
                      '</div>' +
                    '</div>';

                }

                //document.getElementById('users').innerHTML = output;
                document.getElementById('user-list').innerHTML = output;
                document.getElementById('myModal').style.display = "block";  //show modal
                still_fetching = false;
            }
        }

        xhr.send();
}
</script>
</body>
</html>

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'];
}

Answer 1

假设您的模态正在使用 Bootstrap：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User List</h4>
      </div>
      <div class="modal-body" id="user-list">
        <p>User list here</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

编辑你的 JS 函数：

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>' +
                        '<p>'+users[i].id+'</p>' +
                        '<p>'+users[i].name+'</p>' +
                    '</div>';

                }

                //document.getElementById('users').innerHTML = output;
                document.getElementById('user-list').innerHTML = output;
                document.getElementById('myModal').style.display = "block";  //show modal
                still_fetching = false;
            }
        }

        xhr.send();
}

Answer 2

你的代码有问题。

1。你检查名称参数：

if(isset($_GET['name']))

但是get的时候不提供。

xhr.open('GET', 'users.php', true);

提供它。

xhr.open('GET', 'users.php?name=shingo', true);

2。响应不是 JSON 字符串：

echo 'GET：你的名字是'。 $_GET['name'];

JSON.parse(this.responseText);