如何使用ajax向php发送与每个按钮相关的数据?

I know that a code like this is used for sending data to php file without refreshing by using ajax, but this code only works for one form with some inputs, my problem is: I have a web page that in it there are 5 buttons and each button is related to different input, I want to send data with ajax without refreshing,for example when I click on button 1, it sends its own inputs and when I click button n it sends its own data, how can I do that?

我知道这样的代码是用于将数据发送到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>

6 个解决方案

#1

" but this code only works for one form with some inputs "

"但是这个代码只适用于有输入的表单"

Technically speaking, that will work with any form on the page. (as you are targeting the form tag)

从技术上讲，这将适用于页面上的任何形式。(因为您的目标是表单标记)

If you want to target mutliple buttons and process them the same way add a class to them.

如果您想要针对mutliple按钮，并以相同的方式处理它们，则向它们添加一个类。

If you want to target seperate elements individually, add an id.

如果您想要单独地针对分离元素，请添加一个id。

You then target classes as $('.classname') and ids as $('#id') notice the . and # (as with css selectors)

然后将类目标设置为$('.classname')， id设置为$('#id')。和#(与css选择器一样)

SEE LIVE EXAMPLE here

看到生活的例子

$('.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>

6 个解决方案

#1

更多相关文章

随机推荐