Php 通过ajax将jquery中的HTML解析为元素，并替换页面上的每个对应元素

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

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

setInterval（函数（）{refresh（）}，5000）；
函数刷新（）
{
$.post（“test.php”，
{
//这里什么都没有
},
功能（数据、文本状态）
{      
$（''+数据+''）.find（'.maindiv'）.each（函数（）{
$（'.maindiv'）。替换为（'.maindiv'）；
});
});  
}
旧子分区内容
另一个旧的分区
这个内容很旧
请告诉我最新情况！

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

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

这只是一个非常基本的例子。我这样做是因为这些元素中的内容发生了变化，并希望替换liveupdate之类的元素

我发布的函数似乎没有响应，所以不知道如何实现

---

提前感谢

您需要为页面中的

maindiv

元素编制索引，以便它们与新元素匹配

还需要修改要替换的内容

 $(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);
});

每个

将跟踪

索引

，

eq（）

用于匹配页面中的相同索引

---

编辑：也将

find（）

更改为

filter（）

，如果输出的根目录中只有一个DIV，那么为什么不在接收到ajax响应后，将整个块替换为

html（）

函数poll（）{
setTimeout（函数（）{
$.ajax（{url:“./test.php”，缓存：false，
成功：功能（数据）{
$（“#polling”）.html（数据）；
poll（）；
}});
}, 5000);
}
$（文档）.ready（函数（）{
poll（）；
});
旧子分区内容
另一个旧的分区
这个内容很旧
请告诉我最新情况！

编辑 您还可以返回json，然后根据id将响应循环到DIV中 以下是一个例子：

<?php 
//check for ajax and return
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    header('Content-Type: application/json');

    $response = array(
    'block_a'=>'content for block a (last_updated:)'.date("D M j G:i:s T Y"),
    'block_b'=>'content for block b (last_updated:)'.date("D M j G:i:s T Y"),
    'block_c'=>'content for block c (last_updated:)'.date("D M j G:i:s T Y"),
    'block_d'=>'content for block d (last_updated:)'.date("D M j G:i:s T Y"),
    'block_e'=>'content for block e (last_updated:)'.date("D M j G:i:s T Y"),
    ); 

    echo json_encode($response);
    die;
}
?>


<script type="text/javascript">
function poll(){
    setTimeout(function(){
        $.ajax({ url: "./test.php", cache: false,
        success: function(data){
            $.each(data, function(k, v) {
                //key value place html blocks
                $("#"+k).html(v);
            });
            poll();
        }, dataType: "json"});
    }, 1000);
}

$(document).ready(function(){
    poll();
});
</script>


<div id = "block_a" class= "maindiv"></div>
<div id = "block_b" class= "maindiv"></div>
<div id = "block_c" class= "maindiv"></div>
<div id = "block_d" class= "maindiv"></div>
<div id = "block_e" class= "maindiv"></div>

“a区内容（上次更新：）”日期（“D M j G:i:s T Y”），
“块b”=>“块b的内容（上次更新：）”。日期（“D M j G:i:s T Y”），
“块c”=>“块c的内容（上次更新：）”。日期（“D M j G:i:s T Y”），
“block_d”=>“block d的内容（上次更新：）”。日期（“d M j G:i:s T Y”），
‘block_e’=>‘block_e的内容（上次更新：）’。日期（“D M j G:i:s T Y”），
); 
echo json_编码（$response）；
死亡
}
?>
函数poll（）{
setTimeout（函数（）{
$.ajax（{url:“./test.php”，缓存：false，
成功：功能（数据）{
$。每个（数据、函数（k、v）{
//键值放置html块
$（“#”+k）.html（v）；
});
poll（）；
}，数据类型：“json”}）；
}, 1000);
}
$（文档）.ready（函数（）{
poll（）；
});

---

通过这种方式，您可以构建

$response

，每次投票时只替换您想要替换的内容。

尽管我相信HTML5允许这样做，使用以数字开头的ID在某些浏览器中不起作用。我必须使用唯一的数字，因为页面上有很多交互，所以它们必须是唯一的……无论如何，感谢您指出@popnoodlesYou不能用非数字字符串作为前缀？无论如何，至少你知道。在解决上述问题后，你可以这样做：）这些HTML块看起来非常相似。如果它们看起来都是这样的，那么最有效的方法就是使用模板并仅返回替换模板中占位符所需的数据。该函数可以工作，但存在一些问题，因为它与被替换元素的

id

不匹配，只使用class

maindiv

替换第一个元素。例如，如果在HTML页面上，按此顺序我有id3、2和1，而在PHP页面上我只有ID1。如果我使用这样的函数，它将用ID1替换页面上的id3，因为id3是第一个

maindiv

presentOK，我修改了答案以匹配ID。这项功能现在运行良好：）最后一个问题是，如果我有一个名为

maindiv

的元素，与上面发布的元素类似，但有另一个名为

gid

的属性，例如，如何替换常规ID？？（某些元素可能具有

id

，而另一些元素可能具有

gid

，但两者都具有相同的编号…那么将两者替换如何？？尝试添加

$（'#'+this.gid）。替换为（this）

但它不起作用对不起，你听不懂我的意思…我的意思是它只使用id，我如何使它使用自定义属性而不是常规id？因为这是一个非常基本的示例：）我实际要做的是，我只想发送一些特定的id，例如发送id 2,4（共1,2,3,4个）并用它们的新内容更新那些2,4元素，所以想要一个id特定的响应谢谢你的努力Lawrence…我选择Charlie的答案是为了简单…谢谢：）

<?php 
//check for ajax and return
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    header('Content-Type: text/html');

    $response = '
    <div id = "a" class= "maindiv">
       <div sid= "1" class= "subdiv">'.date("D M j G:i:s T Y").'</div>
       <div cid= "1" class= "childdiv">'.md5(time()).'</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
    </div>
    <div id = "a" class= "maindiv">
       <div sid= "1" class= "subdiv">'.date("D M j G:i:s T Y").'</div>
       <div cid= "1" class= "childdiv">'.md5(time()+1).'</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
    </div>'; 

    echo $response;
    die;
}
?>

<script type="text/javascript">
function poll(){
    setTimeout(function(){
        $.ajax({ url: "./test.php", cache: false,
        success: function(data){
            $("#polling").html( data );
            poll();
        }});
    }, 5000);
}
$(document).ready(function(){
    poll();
});
</script>


<div id = "polling" class= "maindiv">
    <!--New response will replace the below html-->
    <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> 

</div>

<?php 
//check for ajax and return
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    header('Content-Type: application/json');

    $response = array(
    'block_a'=>'content for block a (last_updated:)'.date("D M j G:i:s T Y"),
    'block_b'=>'content for block b (last_updated:)'.date("D M j G:i:s T Y"),
    'block_c'=>'content for block c (last_updated:)'.date("D M j G:i:s T Y"),
    'block_d'=>'content for block d (last_updated:)'.date("D M j G:i:s T Y"),
    'block_e'=>'content for block e (last_updated:)'.date("D M j G:i:s T Y"),
    ); 

    echo json_encode($response);
    die;
}
?>


<script type="text/javascript">
function poll(){
    setTimeout(function(){
        $.ajax({ url: "./test.php", cache: false,
        success: function(data){
            $.each(data, function(k, v) {
                //key value place html blocks
                $("#"+k).html(v);
            });
            poll();
        }, dataType: "json"});
    }, 1000);
}

$(document).ready(function(){
    poll();
});
</script>


<div id = "block_a" class= "maindiv"></div>
<div id = "block_b" class= "maindiv"></div>
<div id = "block_c" class= "maindiv"></div>
<div id = "block_d" class= "maindiv"></div>
<div id = "block_e" class= "maindiv"></div>