将带有数据值的列表中的值传递给mysql查询

Question

I have a list

<ul id="my_ul">
<li data-value="1"><a href="test.php">111</a></li>
<li data-value="2"><a href="test.php">112</a></li>
<li data-value="3"><a href="test.php">113</a></li>
</ul>

I tried to pass the data-value on click event to MySQL query. I tried it with jQuery but when i var_dump the result its NULL.

Here is how i am getting the value

$('#my_ul').on("click", "li", function(){
   $.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}}); 
});

and here is the fetch_test.php file code :

function showValue(){
include_once "connect.php";
$test=$_SESSION['val'];
$query="SELECT * FROM product INNER JOIN smetka on smetka.id=product.smetka_id WHERE product.smetka_id=$test";
$result=mysqli_query($conn,$query);
    $alert="";
        while($row=mysqli_fetch_array($result)){
            $alert .="<li data-value='$row[id]'><a href='test.php'>$row[name]";

            $alert .= "</a></li>";
        }
    return $alert;
}

How can i pass the data-value from the li?

Answer 1

You should bind the event handler with anchor element and use event.preventDefault() to cancel its the default action. You can use .closest() to traverse up to li element.

$('#my_ul').on("click", "li a", function(e) {
  //Cancels default action of anchor
  e.preventDefault();
  var value = $(e.target).closest('li').data("value");
  console.log(value);
  $.ajax({url: "fetch_test.php", method:"post", data:{val:value}});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my_ul">
  <li data-value="1"><a href="test.php">111</a></li>
  <li data-value="2"><a href="test.php">112</a></li>
  <li data-value="3"><a href="test.php">113</a></li>
</ul>

</div>