Question

我有 ajax查询，每隔6秒就会重新加载页面的div 。有一个操作按钮在重新加载div中打开模态。
问题是每当页面重新加载模态时也会刷新。我必须通过该模式发送一些信息，但我无法填写模式，因为页面每隔6秒保持刷新我无法找到解决方案。
文件如下所示。 file1.php调用file2.php，它有一个带有动态值的表（我已将它们设为静态，仅用于SO。）
PS：我也希望实现一个通知系统，但可以＆＃ 39;找出一种方法。如果有人可以提供帮助。
编辑
我希望 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>

Answer 1

好的，这是你的问题：

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找到大量教程：）

AJAX动态重新加载网页

1 个答案: