Question

我有一个清单

<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>

我尝试将点击事件的data-value传递给MySQL查询。我用jQuery尝试了它但是当我var_dump时结果为NULL。

以下是我如何获得价值

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

这是fetch_test.php文件代码：

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;
}

如何从data-value传递li？

Answer 1

您应该使用anchor元素绑定事件处理程序，并使用event.preventDefault()取消其默认操作。您可以使用.closest()遍历li元素。

$('#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>

Answer 2

使用event.preventDefault()阻止重定向到test.php

而不是

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

使用

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

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

2 个答案: