如何在我的网页上获取每个帖子的ID?

时间:2017-05-16 13:55:30

标签: javascript php ajax

我正在尝试在js中发送帖子ID。我可以发送第一个帖子ID,但我如何发送每个帖子的ID。 inspect元素看起来像这样

<div  data-id="post_1"></div>
<div  data-id="post_2"></div>
<div  data-id="post_3"></div>


<script type="text/javascript" >
 function ajax(){

    var req = new XMLHttpRequest();

    req.onreadystatechange = function(){

    if(req.readyState == 4 && req.status == 200){

    document.querySelector('[data-id=post_1]').innerHTML = req.responseText;
    } 
    }
    req.open('GET','chat.php?id=1>',true); 
    req.send();

    }
    setInterval(function(){ajax()},1000);


</script>   

这是代码

<div  data-id="post_<?php echo $post_id;?>"></div>



<script type="text/javascript" >
 function ajax(){

    var req = new XMLHttpRequest();

    req.onreadystatechange = function(){

    if(req.readyState == 4 && req.status == 200){

    document.querySelector('[data-id=post_<?=$post_id?>]').innerHTML = req.responseText;
    } 
    }
    req.open('GET','chat.php?id=<?=$post_id?>',true); 
    req.send();

    }
    setInterval(function(){ajax()},1000);


</script>    

所有帖子都在同一页面上。但我只能获得一个帖子的ID。如何在js中获得ID post_2post_3

js显示每个帖子的评论。只有第一篇帖子显示评论,因为js只获得第一个帖子的ID。休息没有显示任何东西。

我如何为每个帖子做同样的事情?

1 个答案:

答案 0 :(得分:1)

querySelector永远不会给你超过1个元素。如果您需要满足查询的所有元素,请使用querySelectorAll

PHP代码中使用JS表示它只会使用1 post_id

最简单的方法是向您的div添加class或其他data-attribute

<div data-type="post" data-id="1">a</div>
<div data-type="post" data-id="3">b</div>
<div data-type="post" data-id="2">c</div>

您可以使用新的attribute来获取它们并迭代它们。

var elements = document.querySelectorAll('[data-type="post"]')
for (var i = 0; i < elements.length; i++) {
  var postId = elements[i].getAttribute('data-id')
  // do ajax stuff
  // ... then
  elements[i].innerHTML = 'ajax response'
}

https://jsfiddle.net/w6kazkm1/4/

编辑:误解了你的问题。答案现已更新。