AJAX - 不刷新，将自动刷新加载到另一个页面

Question

我唯一的问题是页面没有加载自动刷新，当我刷新页面时它正在加载.. PS我正在将页面加载到另一个页面

这是我的 html 和 ajax 代码及其数据库。

我的触发按钮

    <?php
        $data = mysqli_query($con,"SELECT * FROM announcement");
        $count = mysqli_num_rows($data);
        if ($count != 0) {
            while($row = mysqli_fetch_array($data)) { 
                echo '
                    <button class="btn btn-danger nav-link delannouncement" id="delannouncement">Resume System</button>';
                $dataid = $row['id'];
            }
        }else{
            echo '<button class="btn btn-primary nav-link announcement" id="announcement">Passenger Announcement</button>';
        }
    ?>

获取数据库中的数据

这里是我将mysql中的数据从ajax调用到这里的地方。

$data = mysqli_query($con,"SELECT * FROM announcement");
    $count = mysqli_num_rows($data);
    if ($count != 0) {
      while($row = mysqli_fetch_array($data)) { 
          echo '<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">
                      <h5>'.$row['additional_info'].'</h5>
                      <p>Please click refresh button to resume after the announcement</p>
                  </div>
                  </div>

                </div>
                    <img class="modal-content" id="img01">
                    </div>';
                  $dataid = $row['id'];
          }
      }

        ?>
        </div>

        <script>
        document.getElementById('myModal').style.display='block';

我的 AJAX 代码 这是我的 AJAX 代码，这里是我点击按钮后模态不会立即加载的问题，在它工作之前，我需要刷新页面如何解决这个问题 p>

 $('.announcement').on("click", function () {
        $.confirm({
            title: 'Announcement',
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<label>Announcement Info</label>' +
                '<input type="text" placeholder="Enter announcement here" class="add-info form-control" required />' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    btnClass: 'btn-blue',
                    action: function () {
                        var addInfo = this.$content.find('.add-info').val();
                            $.confirm({
                                type: 'red',
                                theme: 'material',
                                title: 'Are you sure you want to make an announcement?',
                                content:'<strong>Announcement Info:</strong> ' + addInfo,
                                buttons: {
                                    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);

                                                }

                                            });

                                        }

                                    },
                                    No: {
                                        text: 'No', // With spaces and symbols
                                        action: function () {
                                            $.alert('Announcement Cancelled');
                                        }
                                    }
                                }
                            });
                    }
                },
                cancel: function () {
                    //close
                },
            },
            onContentReady: function () {
                // bind to events
                var jc = this;
                this.$content.find('form').on('submit', function (e) {
                    // if the user submits the form by pressing enter in the field.
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click'); // reference the button and click it
                });
            }
        });

    });

我是 ajax 编码和语法新手，请帮助我完成这个项目。

Answer 1

不要进入这么复杂的解决方案，只需从您的 API 中返回 json（或 xml）格式的数据，然后在前端呈现您想要的任何 html（即不要从后端返回 html）