如何使用 AJAX 将与每个按钮相关的数据发送到 PHP - how is it possible to send data related to each button to php by using ajax?

我知道这样的代码用于将数据发送到php文件而无需使用ajax刷新，但是此代码仅适用于具有某些输入的一种表单，我的问题是：我有一个网页，里面有 5 个按钮，每个按钮都与不同的输入相关，我想在不刷新的情况下使用 ajax 发送数据，例如，当我单击按钮 1 时，它会发送自己的输入，当我单击按钮 n 时，它会发送自己的数据，我该怎么做？

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'led.php',
        data: $('form').serialize(),
        success: function () {
        }
      });
    });
  });
   </script>
 </head>
 <body>
    <form>
      <input type='hidden' name="key" value="on">
      <input name="key" type="submit" value="ON">
    </form>
  </body>
</html>

"但此代码仅适用于具有某些输入的一种形式"

从技术上讲，这将适用于页面上的任何表单。（当您定位form标记时）

如果要定位多个按钮并以相同的方式处理它们，请向它们添加一个类。

如果要单独定位单独的元素，请添加 id。

然后，您将类定位为$('.classname')，将 id 定位为$('#id')注意 . 和 #（与 css 选择器一样）

在此处查看实时示例

$('.submit_to_a').parent('form').on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: 'a.php',
    data: $(this).serialize(),
    success: function() {}
  });
});

$('#gotob').parent('form').on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: 'b.php',
    data: $(this).serialize(),
    success: function() {}
  });
});
$('#gotoc').parent('form').on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: 'c.php',
    data: $(this).serialize(),
    success: function() {}
  });
});

<form action="a.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" class="submit_to_a">goes to a</button>
</form>
<form action="a.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" class="submit_to_a">goes to a</button>
</form>
<form action="b.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" id="gotob">goes to b</button>
</form>
<form action="c.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" id="gotoc">goes to c</button>
</form>

我认为每个按钮都有不同的表单和表单元素。如果是这样，那么这可能会对您有所帮助。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
 $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      var formdata=$(this).serialize();
      $.ajax({
        type: 'post',
        url: 'led.php',
        data: formdata,
        success: function () {
        }
      });
    });
  });
   </script>
 </head>
 <body>
    <form>
      <input type='hidden' name="key" value="on">
      <input name="key" type="submit" value="ON">
    </form>
    <form>
      <input type='hidden' name="anotherkey" value="on">
      <input name="key" type="submit" value="ON">
    </form>
  </body>
</html>

这将序列化您单击的表单元素并将其发送到您的 PHP 代码。

您可以找出单击的按钮并决定要发送的数据：（这是复制的形式在这里）

$(document).ready(function() {
    $("form").submit(function() { 
    var val = $("input[type=submit][clicked=true]").val()
    // DO WORK
});
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

但是，我强烈建议对每组数据使用不同的表单。

你可以为你拥有的每个表单提供一个唯一的id，你的jquery看起来像

$('#form_id').submit(function(e) {
    e.preventDefault();
    #your code here
});

$('form').on('submit', function (e) {
      e.preventDefault();
      $inputs = $(this).serialize(),
      $.ajax({
        type: 'post',
        url: 'led.php',
        data: $inputs,
        success: function () {
        }
      });
    });

首先，您有两个同名"key"的输入。始终给它一个不同的名称。并且输入类型提交不需要名称

为每个表单提供一个 ID。然后像这样使用它

$('#form_id').submit(function(e) {
    e.preventDefault();
   Your code here
});