如何在此代码上添加此函数'setInterval'以使我的页面无需刷新即可获取表单或数据

时间:2018-12-26 08:24:05

标签: javascript php html ajax

我有Ajax和javascript,现在我正在将此模式获取到另一个页面或另一个单独的浏览器。

目前,我可以获取模式,但在模式显示之前,我需要它刷新页面。我如何才能做到而无需单击刷新。我已经进行了一些研究,并且看到了setInterval函数,但是我应该如何通过代码实现它呢,谢谢!我只想在模态显示之前不刷新页面。

在这里是我的模式形式,这是代码,而在我提交提交按钮之后

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

这是我要在其中放置 setInterval 函数以使页面自动不刷新的脚本

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

目前,它没有任何特殊代码,只是我显示模态的方式,但需要刷新

我希望一旦我已经单击了提交按钮,就应该显示模态的输出。对于我的代码,按钮已经被单击,我只想插入setInterval函数以使模式显示而无需刷新页面

1 个答案:

答案 0 :(得分:0)

刷新

# ===============================
# = DATA SOURCE
# ===============================

# Set here configurations for the database connection

# Connection url for the database "netgloo_blog"

spring.datasource.url = jdbc:mysql://localhost:3306/auto_journey

# Username and password
spring.datasource.username = root
spring.datasource.password =auto123

# Keep the connection alive if idle for a long time (needed in production)
#spring.datasource.testWhileIdle = true
#spring.datasource.validationQuery = SELECT 1

# ===============================
# = JPA / HIBERNATE
# ===============================

# Use spring.jpa.properties.* for Hibernate native properties (the prefix is
# stripped before adding them to the entity manager).

# Show or not log for each sql query
spring.jpa.show-sql = true

# Hibernate ddl auto (create, create-drop, update): with "update" the database
# schema will be automatically updated accordingly to java entities found in
# the project
spring.jpa.hibernate.ddl-auto = update

# Naming strategy
spring.jpa.hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy

# Allows Hibernate to generate SQL optimized for a particular DBMS
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect

server.servlet.context-path=/autofinance


server.port=9090


spring.mvc.static-path-pattern=/resources/**

ajax

<html>
    <head>
        <script src="addon/jquery/jquery.js"></script>
    </head>
    <body>
        <div id="modalid">
        </div>

        <button onclick="ra()">REFRESH</button>

        <script>
            function ra() {
                $.ajax({
                    type: "GET",
                    url: "testajax.php",
                    data: { val : "ann" },
                    dataType: "json",
                    success: function(data) {
                        if(data.status == "OK") {
                            document.getElementById("modalid").innerHTML = data.value
                            setTimeout( function() { document.getElementById('myModal').style.display = 'none'; }, 3000);
                        }
                        else {
                            alert(data.value)
                        }
                    }
                });
            }
        </script>
    </body>
</html>

这是你想要的吗?