js，mysql，php - 通过while循环获取ajax请求中的特定结果

Question

I want to display only a certain result via ajax when I click on a button while it is in the while loop.

while($row = mysql_fetch_array($rs_admin))
{

echo ("<h3>" .$row['emer_type'] . "</h3> ");
echo ("<p>".$row['emer_desc'] . "</p>");
echo '<div class="button"><button type="button" onclick="loadDoc()">Change Content</button></div>':
echo '<div id="demo"><p>I WANT TO PUT IT HERE</p></div>';
}

They have their very own ID so that they know what they will fetch. This is the ajax that I've got

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "test.php", true);
  xhttp.send();
}
</script>

The test.php is this

<?php
 include 'includes/db_connection.php'; 
 $sel_admin = "select * from ehr_cm_emergency ";
 $rs_admin = mysql_query($sel_admin);
 while ($row = mysql_fetch_array($rs_admin)) 
 {
     echo $row['emer_more'];

  }
?>

However when I'm clicking the button in the second or third button, the result is displaying in the first one.

Answer 1

Differentiate the id by auto increment and pass it to the function, and apply to the text to the id like following,

<?php

    $i=0;
    while($row = mysql_fetch_array($rs_admin))
    {
        $i++;
        echo ("<h3>" .$row['emer_type'] . "</h3> ");
        echo ("<p>".$row['emer_desc'] . "</p>");
        echo '<div class="button"><button type="button" onclick="loadDoc(\'demo'.$i.'\')">Change Content</button></div>';
        echo '<div id="demo'.$i.'"><p>I WANT TO PUT IT HERE</p></div>';
    }

?>

    <script>
    function loadDoc(id) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById(id).innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "test.php", true);
      xhttp.send();
    }
    </script>

---

For specific Row based I used emp_id for unique, change your value

<?php

    $i=0;
    while($row = mysql_fetch_array($rs_admin))
    {
        $i++;
        echo ("<h3>" .$row['emer_type'] . "</h3> ");
        echo ("<p>".$row['emer_desc'] . "</p>");
        echo '<div class="button"><button type="button" onclick="loadDoc(\'demo'.$i.'\','.$row['emp_id'].')">Change Content</button></div>';
        echo '<div id="demo'.$i.'"><p>I WANT TO PUT IT HERE</p></div>';
    }

?>

    <script>
    function loadDoc(id,empid) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById(id).innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "test.php?empid="+empid, true);
      xhttp.send();
    }
    </script>


<?php
 include 'includes/db_connection.php'; 
 $sel_admin = "select * from ehr_cm_emergency where emp_id=".$_GET['emp_id'];
 $rs_admin = mysql_query($sel_admin);
 while ($row = mysql_fetch_array($rs_admin)) 
 {
     echo $row['emer_more'];

  }
?>