Fatal编程技术网
  • javascript/
  • Javascript AJAX动态重新加载网页

Javascript AJAX动态重新加载网页

javascript php jquery ajax notifications

Javascript AJAX动态重新加载网页,javascript,php,jquery,ajax,notifications,Javascript,Php,Jquery,Ajax,Notifications,我有一个ajax查询，它每6秒就不断地重新加载一个div页面。在这个重新加载div中有一个操作按钮，它会打开一个模式每当页面重新加载时，模式也会刷新。我必须通过该模式发送一些信息，但我无法填充该模式，因为页面每6秒刷新一次我找不到解决方案文件如下所示。file1.php调用file2.php，它有一个带有动态值的表（为此我将它们设置为静态）。P.S.：我也想实现一个通知系统，但找不到实现方法。如果有人能帮忙的话。编辑我希望div每6秒重新加载一次，但不希望模式重新加载 file1.php <

我有一个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>

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


AJAX示例
你好

正在加载数据

//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
var-req；
函数重载数据（）
{
var now=新日期（）；
url='SO.php？'+now.getTime（）；
试一试{
req=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获量（oc）{
警报（“不支持AJAX”）；
返回；
}
}
}
req.onreadystatechange=processReqChange；
请求打开（“获取”，url，true）；
请求发送（空）；
}
函数processReqChange（）
{
//如果req显示“完成”
如果（req.readyState==4）
{
dataDiv=document.getElementById（'currentData'）；
//如果“确定”
如果（请求状态==200）
{
//设置当前数据文本
dataDiv.innerHTML=req.responseText；
//启动新计时器（1分钟）
timeoutID=setTimeout（'reloadData（）'，6000）；
}
其他的
{
//标志错误
dataDiv.innerHTML='检索数据时出现问题：'+req.statusText+'
'；
}
}
}
SO.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>

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


桌子{
宽度：100%；
边界塌陷：塌陷；
}
表，td，th{
边框：1px纯黑；
填充物：5px；
}
th{文本对齐：左；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
名字
可移动的
电子邮件
家乡
行动
伊尔沙德
9876543210
abc@example.com
土
行动
×
模态中的一些文本

//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
好的，这是您的问题：

var modal=document.getElementById（'myModal'）

现在
modal
引用您的元素。
但是，一旦ajax请求获取新数据，该元素就会被删除并替换为具有相同ID的新元素

您可以做的是将从
SO.php
输出的数据结构化为JSON对象，并仅替换每个HTML元素的内容

JSON对象通常如下所示：


[“这是一些文字！”，“更多文字！”]


如果让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>';
    }
  }
}



函数重载数据（）
{
url='text.php？'+Date.now（）；
试一试{
req=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获量（oc）{
警报（“不支持AJAX”）；
返回；
}
}
}
req.onreadystatechange=processReqChange；
请求打开（“获取”，url，true）；
请求发送（空）；
}
函数processReqChange（）
{
如果（req.readyState==4）
{
dataDiv=document.getElementById（'currentData'）；
如果（请求状态==200）
{
obj=JSON.parse（req.responseText）；//现在表示JSON对象。
对于（变量i=0；i