如何在 Ajax 中将按钮值作为变量传递？

Question

我有个问题。 我想使用 PHP、MySQL 和 Ajax 交换某些数据。

为此，我总是必须将字段的 ID 传递给我的后端，这样我才能继续使用这个 ID。

如何将按钮中的值传递给 Ajax 中的 URL？ 我需要考虑什么？ row['id'] 是我的变量（PHP）

HTML 代码：

<a class='commentSikayet'>
  <button id='commentSikayet' name='commentSikayet' value='{$row['id']}'>
    Şikayet et
  </button>
</a>

Ajax：

$(document).ready(function () {
  $("#commentSikayet").click(function () {
    $.ajax({
      url: 'report_comment.php',
      type: 'POST',
      data: {bar: $("#bar").val()},
      success: function (result) {
        alert('Erfolgreich gemeldet.');
      }
    });
  });
});

Answer 1

由于您正在侦听按钮上的单击事件，因此您可以在处理程序 function 中通过this访问它。

将名称/值对添加到您的 AJAX data选项

$("#commentSikayet").on("click", function (e) {
  e.preventDefault();
  $.post("report_comment.php", {
    bar: $("#bar").val(),
    [ this.name ]: this.value // add name / value in here
  }).done(function (result) {
    alert('Erfolgreich gemeldet.');
  });
});

这将包括您在 PHP 端通过...访问的 POST 请求正文中的commentSikayet=rowIdValue ...

$rowId = $_POST["commentSikayet"];

Answer 2

假设您的页面中可能有多个数据集，我将您的示例修改为以下代码段。 每个按钮都有一个标识当前数据集的data-id属性（id 将通过 PHP 脚本作为$row["id"]提供）：

 $("body").on("click","button", function(ev){ ev.preventDefault(); // prevent submitting a form... let data={cmt_id: $(this).data("id"), value: $(this).prev().val()} $.post("https://jsonplaceholder.typicode.com/comments",data).done(function (result) { console.log("Erfolgreich gemeldet:",result); }); });

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div><input type="text" value="some text"> <button name="commentSikayet" data-id="123">Şikayet et</button></div> <div><input type="text" value="some other text"> <button name="commentSikayet" data-id="124">Şikayet et</button></div> <div><input type="text" value="more text"> <button name="commentSikayet" data-id="125">Şikayet et</button></div>

在您的后端 PHP 脚本（代替上面的 typicode-URL）中，您可以从$_POST超全局中获取值

$_POST["cmt_id"]; // id value
$_POST["value"];. // actual text content