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



我有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函数,让模态在不刷新页面的情况下显示

刷新

<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>

ajax

<?php
$jStatus = "ERROR";
$jValue = "";
$val = filter_input(INPUT_GET, "val");
if($val == 'ann') {
$jStatus = "OK";
$jValue = "<div id='myModal' class='modal' style='position:fixed; display: block; 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>HELLLOOO</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class='modal-content' id='img01'>
</div>";
}
$jsonReply = array( "status" => $jStatus, "value" => $jValue);
echo json_encode($jsonReply);
?>

这是你想要的吗?

最新更新