通过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);
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>
被调用以更新元素的PHP页面(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>';
?>
这两个元素也出现在HTML页面上。基本上,我想调用PHP页面,从PHP页面中获取这些元素,并在HTML页面的响应中循环使用它们,并用HTML页面上的相应元素替换每个maindiv(包括其所有子元素)。
这只是一个非常基本的例子。我这样做是因为这些元素中的内容发生了变化,并且希望像实时更新一样替换元素。
我发布的功能似乎没有回应,所以不知道如何实现。
提前感谢
您需要对页面中的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);
});
each
将跟踪index
,eq()
用于匹配页面中的相同索引。
编辑:如果只有输出是输出根中的DIV,也将find()
更改为filter()
为什么不在要轮询的内容周围设置一个div,然后在收到ajax响应时用html()
替换整个块
<?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>
编辑
您还可以返回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>
通过这种方式,您可以在每次轮询时只使用您想要替换的内容来构建$response
。
相关文章:
- 使用jquery将单个换行符替换为span元素
- 循环对象时更新页面上的DIV元素
- 将换行符写入<span>元素
- 范围和列表元素在 DIV 中换行
- CodeIgniter - AJAX 生成的元素内的 AJAX 分页
- 整页.js触摸滚动固定元素
- Python返回上一页并记住元素
- 将元素插入页眉
- 如何循环浏览页面源中的所有文本框元素并查找所有这些文本框的名称
- 处理来自同一页面上ajax驱动的Fancybox元素的PHP请求
- 删除垂直滚动条而不附加元素换行
- jQuery - 粘性元素与页脚重叠,如何避免
- 无法将 img 元素换成 SVG
- jQuery 从一个元素换行到另一个元素
- 换页时的Phonegap白页
- 固定位置的元素重叠页脚
- jQuery定位没有元素的页脚跳转
- 我不能换页
- 在 JQuery 或 JavaScript 中使用 span 元素换行突出显示文本
- 如何在换页后继续功能