通过ajax解析jQuery中的HTML到元素中并替换页面上的每个对应元素 [英] Parse HTML in jquery through ajax into elements and replace each corresponding on page

问题描述

我在HTML页面上有以下内容：

 < script type =text / javascript> 
 setInterval（function（）{refresh（）}，5000）; 
函数refresh（）
 {
 $ .post（test.php，
 {
 //这里没有任何
}，
函数（data，textStatus）
 {
 
 $（''+ data +''）.find（'。maindiv'）。each（function（）{
 $ '.maindiv'）。replaceWith（'。maindiv'）; 
}）; 
 
}）; 
} 
< / script> 
 
< div id =1class =maindiv> 
< div sid =1class =subdiv>旧的子div内容< / div> 
< div cid =1class =childdiv>另一个旧的子div< / div> 
< img id =1src =http://foo.com/bar.png/> 
< / div> 
 
< div id =2class =maindiv> 
< div sid =2class =subdiv>此内容为旧< / div> 
< div cid =2class =childdiv>请更新我！< / div> 
< img id =2src =http://foo.com/bar.png/> 
< / div> 
  

被调用来更新元素的PHP页面（test.php）：

 <？php 
 
 echo'< div id =1class =maindiv> 
< div sid =1class =subdiv>这是新的sub div< / div> 
< div cid =1class =childdiv>这也是新的子div内容< / div> 
< img id =1src =http://foo.com/bar.png/> 
< / div>'; 
 
 echo'< div id =2class =maindiv> 
< div sid =2class =subdiv>新内容< / div> 
< div cid =2class =childdiv>这个子div的新内容< / div> 
< img id =2src =http://foo.com/bar.png/> 
< / div>'; 
？> 
  

这两个元素也出现在HTML页面上。基本上我想调用PHP页面并从PHP页面获取这些元素，并在HTML页面的响应中遍历它们，并将每个maindiv（包括其所有子元素）替换为HTML页面上的相应元素。

这只是一个非常基本的例子。我这样做是因为内容在这些元素中发生了变化，并希望替换元素，比如实时更新。

我发布的函数似乎没有响应，所以不要知道如何做到这一点。

预先致谢 需要对页面中的 maindiv 元素进行索引，以便它们与新元素匹配。

还需要修改您将替换为

  $（data）.filter（'。maindiv'）。each（function（index）{/ *过滤器或查找取决于发送的HTML结构* / 
 / *this是当前div的响应* / 
 $（'＃'+ this.id）.replaceWith（this）; 
}）; 
  

每个都会跟踪 index ， eq（）用于匹配页面中的相同索引。

编辑：如果只有输出是DIV的，则还要将 find（）更改为 filter（）在输出的根目录中

I have the following on an HTML page:

<script type="text/javascript">
setInterval(function(){refresh()},5000);
function refresh()
{
    $.post("test.php",
    {
           // nothing here             
    },
    function(data, textStatus)
    {      

      $('' + data + '').find('.maindiv').each(function () {
      $('.maindiv').replaceWith('.maindiv');
      });

    });  
}
</script>

<div id = "1" class= "maindiv">
<div sid= "1" class= "subdiv">old sub div content</div>
<div cid= "1" class= "childdiv">another old sub div</div>
<img id = "1" src="http://foo.com/bar.png"/>  
</div>

<div id = "2" class= "maindiv">
<div sid= "2" class= "subdiv">this content is old</div>
<div cid= "2" class= "childdiv">please update me!</div>
<img id= "2" src="http://foo.com/bar.png"/>  
</div> 

The PHP page that gets called to update elements (test.php):

<?php

 echo '<div id = "1" class= "maindiv">
       <div sid= "1" class= "subdiv">this is new sub div</div>
       <div cid= "1" class= "childdiv">this is also new sub div content</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
       </div>'; 

 echo '<div id = "2" class= "maindiv">
       <div sid= "2" class= "subdiv">new content</div>
       <div cid= "2" class= "childdiv">new content for this child div</div>
       <img id= "2" src="http://foo.com/bar.png"/>  
       </div>'; 
?>

These 2 elements are also present on the HTML page. Basically what I want to call the PHP page and get those elements from the PHP page and loop through them in the response in the HTML page and replace each maindiv (including all its child elements) with the corresponding one on the HTML page.

This is just a very basic example. I do this because the content changes in these elements and want to replace the elemnts like live update.

The function I'm posting seems to have no response so don't know how to achieve this.

Thanks in advance

解决方案

You need to index the maindiv elements in page so that they match with the new elements.

Also need to modify what you are replacing with

 $(data ).filter('.maindiv').each(function (index) {/* filter or find depends on html structure sent*/
      /* "this" is the current div in response*/          
      $('#'+this.id).replaceWith(this);
});

each will track index, eq() is used to match same index in page.

EDIT: Also change find() to filter() if only output is the DIV's in root of output

这篇关于通过ajax解析jQuery中的HTML到元素中并替换页面上的每个对应元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！