パス値

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> 

を持っている私は、MySQLのクエリにクリックイベントにdata-valueを渡そうとしました。私はjQueryで試しましたが、私がvar_dumpの結果をNULLにしたとき。

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

がどのように私は渡すことができますliからdata-value：ここ

は私が値

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

を取得し、ここでfetch_test.phpファイルのコードであるのですかですか？

Answer 1

アンカー要素でイベントハンドラをバインドし、デフォルト動作をキャンセルするにはevent.preventDefault()を使用する必要があります。 .closest()を使用して、li要素までトラバースすることができます。

代わりの

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

をtest.phpをするためにリダイレクトを防ぐために

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

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