我有一个ajax查询，它每6秒不断重新加载页面的一个div。
有一个操作按钮 在打开模态的重新加载div中。
问题是每当页面重新加载时模态也会刷新。我必须通过该模式发送一些信息，但我无法填充模式，因为页面每 6 秒刷新一次
我找不到解决方案。
文件如下所示。 file1.php 调用 file2.php，其中有一个包含动态值的表(我已将它们设为静态，只是为了这样。)
P.S.: 我也希望实现一个通知系统，但不能'想办法做到这一点。如果有人可以提供帮助。
编辑
我希望 div 每 6 秒重新加载一次，而不是模式
file1.php
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AJAX Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="reloader.js"></script>
</head>
<body onload="reloadData()">
<p> HELLO There!</p>
<div id="currentData" align="center">
<p>Loading Data...</p>
</div>
</body>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var req;
function reloadData()
{
var now = new Date();
url = 'SO.php?' + now.getTime();
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (oc) {
alert("No AJAX Support");
return;
}
}
}
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
function processReqChange()
{
// If req shows "complete"
if (req.readyState == 4)
{
dataDiv = document.getElementById('currentData');
// If "OK"
if (req.status == 200)
{
// Set current data text
dataDiv.innerHTML = req.responseText;
// Start new timer (1 min)
timeoutID = setTimeout('reloadData()', 6000);
}
else
{
// Flag error
dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
}
}
}
</script>
</html>
SO.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Mobile</th>
<th>Email</th>
<th>Hometown</th>
<th>Action</th>
</tr>
<tr>
<td>Irshad</td>
<td>9876543210</td>
<td>abc@example.com</td>
<td>Earth</td>
<td><button id="myBtn" data-toggle="modal" data-target=".modal">Action</button></td>
</tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
最佳答案
好的，这是你的问题:
var modal = document.getElementById('myModal');
现在modal指的是你的元素。
但是，一旦 ajax 请求获取新数据，该元素就会被删除并被具有相同 ID 的新元素替换。
您可以做的是构造从 SO.php 输出的数据作为 JSON 对象，并仅替换每个 HTML 元素的内容。
JSON 对象通常如下所示:
["This is some text!", "Even more text!"]
如果我们让 text.php 返回此数据，
作为一个简单的示例，您可以通过 AJAX 请求 text.php:
function reloadData()
{
url = 'text.php?' + Date.now();
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (oc) {
alert("No AJAX Support");
return;
}
}
}
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
function processReqChange()
{
if (req.readyState == 4)
{
dataDiv = document.getElementById('currentData');
if (req.status == 200)
{
obj = JSON.parse(req.responseText); // This now represents the JSON object.
for(var i = 0; i < obj.length; i++){
dataDiv.getElementsByTagName('p')[i] = obj[i];
}
timeoutID = setTimeout('reloadData()', 6000);
}
else
{
dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
}
}
}
你也这么做了<div id="currentData"><p></p><p></p></div>
这两个段落将填充 text.php 返回的文本。
您还可以通过 a simple google search 找到大量教程:)
关于javascript - AJAX 动态重新加载网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35148099/