通过将变量传递给 jquery，无需重新加载即可获取数据

Question

I want to fetch some data (without reloading page) based on UserIds that are linked to a tags. I am not able to pass on UserID to jquery successfully and accurately. What it does is, just picks the last UserID and fetches it.

I have also tried to pass on variable throuh a-tag URL but could not get it accurately in jquery file. It fetches the data from already opened url, not the one being clicked right now.

HTML:

<?php foreach($Messagers as $Messagers1){ ?>
  <form action="" method="post">
    <input type="hidden" id="ANP" value="<?php echo ($Messagers1['UserID']*3);?>"></input>                  
      <a  class="LoadMsgsBtn">
          Click to load data 
       </a>
  </form>
<?php}?>
<div id="result">
  <--The output will come here!-->
</div>

jquery:

 $(document).ready(function(){
   $(".LoadMsgsBtn").click(function LoadMsgsfunc(){
    var ANP = $("input#ANP").val(); 
    var Msg=6;
    alert(ANP);
    $("#result").load("LoadDB.php",{
        ANP: ANP,
        Msg: Msg
    });
  })
});

LoadDB.php:

<?php
    $ID = $_POST['ANP'];
    $Msg = $_POST['Msg'];
    echo $ID . "\n";
    echo $Msg;

I want to fetch data from database without reloading using UserID sent. $Messager is an array having multiple rows, there is a series of a-tags. clicking on any a-tag sents corresponding UserID to jquery code

Answer 1

Classic issue of multiple element selection. It's a bit tricky when you are using loops and jquery selectors ;) Check out the following code. It should work like butter B)

<?php foreach($Messagers as $Messagers1){ ?>
  <form action="" method="post">
      <a class="LoadMsgsBtn" href="javascript:void(0)" onclick="featchData('<?php echo ($Messagers1['UserID']*3);?>')">
          Click to load data 
       </a>
  </form>
<?php}?>
<div id="result">
  <--The output will come here!-->
</div>

Javascript

function featchData(userId)
{
    console.log(userId);
    //if you get the id, write in the rest of the code here ;)
}