php&ajax-当获取到另一个页面并将其作为模式发送时不刷新数据

sulc1iza  于 2021-06-15  发布在  Mysql
关注(0)|答案(2)|浏览(309)

我现在发送数据到另一个页面没有刷新,但我的问题是模式,我不能发送它作为一个模式,但我可以发送到文本的数据。为什么?
这是我的网页图片

这是我的密码
对于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>

进程.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'];
}
o0lyfsai

o0lyfsai1#

你的代码有问题。
1 检查name参数:
if(isset($\u get['name']))
但你不提供它时得到。
xhr.open('get','users.php',true);
提供它。

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

2 响应不是json字符串:
回音“get:你的名字是”$_获取['name'];
json.parse(this.responsetext);

mfpqipee

mfpqipee2#

假设您的模式使用引导:

<!-- 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();
}

相关问题