如果我有多个不同类别的按钮，如何进行 ajax 调用，其中包含 php 查询

Question

我不知道我问的是否正确，但我会尝试：

例如，我有 5 个按钮，每个按钮都有不同的 classes。

<button class="table1">Table1</button>
<button class="table2">Table2</button>
// etc... //

我有脚本，如果单击按钮，它会启动 ajax 调用：

$(".table1").click(function(){
  $.ajax({url:"test.php",success:function(result){
  $(".result").html(result);
  }});
});

我有 php 脚本，应该 select table 通过点击按钮 class （这是我的问题）：

foreach($db->query('SELECT * FROM table1') as $row) {
  echo '<div><b>'.$row['info1'].'</b></div>';
  echo '<span>'.$row['info2'].'</span><br/>';
  echo '<span>'.$row['info3'].'</span>';
  echo '<br/><br/><br/>';

}

问题： 这所有的脚本都在工作，但是，不知何故我需要做的是，如果我点击 table1，那么 php 查询应该 select table1，如果点击 table2，比查询应该select table2 ...等等

我不擅长ajax。我只知道 php 基础知识。

抱歉英语不好。

Answer 1

拆分您的 CSS class，例如

<button class="clickable" data-tableid="1">...</button>
<button class="clickable" data-tableid="2">...</button>

然后将您的点击句柄仅附加到 .clickable class。单击事件将包括单击了哪个元素，您可以从中提取该特定按钮的数据属性：

$('.clickable').click(function(e) {  // 'e' is the click event
    sourceElement = e.target; // get the button which was clicked
    tableid = sourceElement.dataset.tableid; // extract its tableid data attribute
    ... ajax call here ...
});

Answer 2

我建议修改 HTML:

<button id="table1" class="table">Table1</button>
<button id="table2" class="table">Table2</button>

和javascript代码：

$(".table").click(function(e){
  $.ajax({url:"test.php?table=" + $(e.target).attr('id'),success:function(result){
  $(".result").html(result);
  }});
});

然后您可以从 $_GET['table'] 变量中检查在 PHP 中点击了 table。

Answer 3

只需复制、粘贴一个运行这段代码

在index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

 <button id="table1" class="table">Table1</button>
 <button id="table2" class="table">Table2</button>
 <button id="table3" class="table">Table3</button>
 <script>

 $( ".table" ).click(function() {
var table = $(this).attr('id');
$.ajax({//create an ajax request to load_page.php
type: "POST",
url: "sample.php",
data:{"data":table},
success: function(data) {
    if (data) {

       alert(data);
    }
    else {
        alert('Successfully not posted.');
    }
}
});
}); 
</script>


  </body>
  </html>

在sample.php

<?php
        if(isset($_POST['data'])){
        $table = $_POST['data'];
        foreach($db->query("SELECT * FROM '$table'") as $row) {
        echo $db->query("SELECT * FROM '$table'");
        echo '<div><b>'.$row['info1'].'</b></div>';
        echo '<span>'.$row['info2'].'</span><br/>';
        echo '<span>'.$row['info3'].'</span>';
        echo '<br/><br/><br/>';

      }
      }
    ?>

如果我有多个不同类别的按钮，如何进行 ajax 调用，其中包含 php 查询

How to make ajax call, which has php query if i have multiple buttons with different classes

php

ajax

jquery

select