Question

在这里，我有一个设置间隔，我认为该间隔会在获取数据时自动重新加载页面。

在这里，请查看我的UI以及我如何显示不刷新的模态，并且我具有数据库连接，因此有一个基于我提交按钮时将如何触发模态的基础 id ，该id将保存在模式中，因此该模式将触发并显示。

clickModal.php-这是按钮应点击的位置，它将触发模式并在我的home.php

上显示而不刷新

home.php-单击clickModal.php

上的按钮时，模态应该在弹出或显示的位置

目前它正在运行，但是我需要刷新 home.php上的页面，然后模态才会显示或弹出，这是我的代码。

clickModal.php按钮单击/ ajax成功。

            Yes: 
                                        btnClass: 'btn-green',
                                        action: function () {
                                            $.ajax({
                                                type: "POST",
                                                url: "announcement.php",
                                                data: {
                                                    addInfo: addInfo
                                                },
                                                dataType: "text",
                                                success: function (data) {
                                                    window.location.replace("change-password.php");

                                                },
                                                error: function (err) {
                                                    console.log(err);

                                                }

                                            });

                                        }

home.php

我的数据库连接

 $data = mysqli_query($con,"SELECT * FROM announcement");
  $count = mysqli_num_rows($data);

我的脚本

    <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', 'home.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" style="position:fixed;  display: none; padding-top: 100px;'+
                'left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">'+
                '<div class="container" style="width: 100%">'+
                '<div class="card col-12" style="background-color: red; color: white;">'+
                '<div class="card-header">'+
                    '<p><h3 class="text-center">Announcement</h3></p>'+
                '</div>'+
                  '<div class="card-body text-center">'+

                      '<p>Please click refresh button to resume after the announcement</p>'+
                  '</div>'+
                 '</div>'+
                '</div>'+
                '<img class="modal-content" id="img01">'+
                '</div>';
                }

                 document.getElementById('myModal').style.display='block';
                still_fetching = false;
            }
        }

        xhr.send();
  }



</script>

我需要的是在触发模态时不进行任何刷新。

Answer 1

因此，您的问题是，一旦您的Ajax呼叫响应，就打开模式：

您的Ajax调用应为：

$.get("youpage.php",{ bar: "foo"}, function(data, status){
    // Trigger your modal
});

PHP-提取数据时的Ajax自动刷新页面

1 个答案: