如何通过点击不同按钮在同一脚本中执行不同功能

我在表单内放置了如下按钮：

<form method="POST">
        <div class="mb-3">
              <button  type='button'  id ="btnnew" class="btn btn-info">submit</button>
              <p></p>
        </div>
</form>

我当前使用的前端脚本如下，通过该脚本调用testme.php：

$("#btnnew").confirm({
      
      title: "Confirmation",
      text: "Do you really need?",
      confirm: function(button) {        
        console.log('AJAX request in progress...');
        
        $('#loading').show();
        $.ajax({
          type: 'POST',
          url: 'testme.php',
          success: function(data) {
            $("p").text(data);
          },
          complete: function() {      
            $('#loading').hide();
          }
        });
        
      },
      cancel: function(button) {
        console.log("You aborted the operation.");
      },
      confirmButton: "Yes I Need",
      cancelButton: "No"
    });

当前testme.php代码如下：

<?php
sleep(5);
echo 'Hi Done';

?>

上述功能目前可正常运行。现在我需要为多个按钮实现相同的交互逻辑，仅按钮ID、对应执行的后端逻辑存在差异，示例多按钮表单结构如下：

<form method="POST">
        <div class="mb-3">
              <button  type='button'  id ="btnnew" class="btn btn-info">submit</button>
              <p></p>
        </div>
         <div class="mb-3">
              <button  type='button'  id ="btnnew2" class="btn btn-info">submit</button>
              <p></p>
         </div>
         <div class="mb-3">
              <button  type='button'  id ="btnnew3" class="btn btn-info">submit</button>
              <p></p>
         </div>
</form>

我需要testme.php根据点击的按钮不同执行对应逻辑，预期逻辑如下：

if btnnew clicks
    sleep(5);
    echo 'Hi Done button1';

if btnnew2 clicks
    sleep(10);
    echo 'Hi Done button2';

if btnnew3 clicks
    sleep(15);
    echo 'Hi Done button3';

请问我是否可以仅复用一套脚本来实现上述需求？

完全可以，不需要为每个按钮单独写重复的绑定逻辑，按下面两步改就行：

第一步：改造前端通用绑定逻辑 #

不要单独按ID给每个按钮绑定confirm事件，给所有需要触发逻辑的按钮加统一类名（比如confirm-btn），用类选择器批量绑定。点击时把当前按钮的ID作为参数传给后端，同时修正原来全局选择<p>标签的问题，只把返回结果渲染到当前按钮相邻的结果区域，避免点一个按钮所有行的内容都被替换：

// 给所有带confirm-btn类的按钮统一绑定交互逻辑
$(".confirm-btn").confirm({
  title: "Confirmation",
  text: "Do you really need?",
  confirm: function(button) {        
    console.log('AJAX request in progress...');
    // 获取当前触发点击的按钮对象
    const $currentBtn = $(button);
    // 定位当前按钮对应的结果展示标签
    const $resultBox = $currentBtn.next("p");
    $('#loading').show();
    $.ajax({
      type: 'POST',
      url: 'testme.php',
      // 把当前按钮ID作为参数传给后端做区分
      data: {
        btn_id: $currentBtn.attr("id")
      },
      success: function(data) {
        // 只更新当前按钮对应的结果区域
        $resultBox.text(data);
      },
      complete: function() {      
        $('#loading').hide();
      }
    });
  },
  cancel: function(button) {
    console.log("You aborted the operation.");
  },
  confirmButton: "Yes I Need",
  cancelButton: "No"
});

对应按钮HTML只需要补上统一类名即可，原有ID保持不变：

<button type='button' id="btnnew" class="btn btn-info confirm-btn">submit</button>
<button type='button' id="btnnew2" class="btn btn-info confirm-btn">submit</button>
<button type='button' id="btnnew3" class="btn btn-info confirm-btn">submit</button>

第二步：改造后端PHP逻辑 #

接收前端传过来的btn_id参数，根据不同ID匹配对应业务分支即可：

<?php
$btnId = $_POST['btn_id'] ?? '';

switch ($btnId) {
    case 'btnnew':
        sleep(5);
        echo 'Hi Done button1';
        break;
    case 'btnnew2':
        sleep(10);
        echo 'Hi Done button2';
        break;
    case 'btnnew3':
        sleep(15);
        echo 'Hi Done button3';
        break;
    default:
        echo '无效请求';
}
?>

后续新增按钮不需要重复写JS逻辑，只需要给新按钮加上confirm-btn类、设置唯一ID，再在PHP的switch分支里补上对应处理规则即可。

内容的提问来源于stack exchange，提问作者Codec737