ajax php中通过id动态的Javascript

Question

我不明白这个案例的名称，我有 php 和 ajax 和 bootstrap css 通过使用值动态地从另一个页面获取内容，但我在 foreach 中显示它。这是我的代码

<?php foreach($a as $b){?>
  <button onclick="showUser(this.value)" value="<?php echo $b->p_slug;?>">View Detail</button>
<?php }?> 

<div id="txtHint"></div>

我的 Ajax 脚本

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","<?php echo base_url('testing');?>/"+str,true);
  xmlhttp.send();
}
</script>

从那个 php 它显示了很多内嵌的产品列表，如果我点击那个按钮它会显示数据结果(效果很好) 但问题是，我想在我点击的按钮下方显示该数据响应

例如，如果我单击(红色方 block )，内容将显示在按钮的下方，而下方的其他列表“查看详细信息”将向下移动。

谢谢

Answer 1

在你的 html 中，你可以在你的按钮旁边回显你的 div(你可能需要一些 css 来防止你的 html 在你点击按钮时以一种奇怪的方式呈现):

<?php foreach($a as $b){?>
  <button onclick="showUser(this.value,<?php echo $b->p_slug ?>)" value="<?php echo $a->p_slug;?>">View Detail</button>
  <div id="txthint<?php echo $b->p_slug ?>"></div>
<?php }?> 

然后编辑您的脚本，为您的 div 使用新的 id:

<script>
function showUser(str,slug) {
  if (str=="") {
    document.getElementById("txtHint" + slug).innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint" + slug).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","<?php echo base_url('testing');?>/"+str,true);
  xmlhttp.send();
}
</script>