javascript - 每个类分别发送和插入容器值。怎么样？

我找到了一种通过每个类容器调用dataContainer发送ajax请求的方法。我面临的问题是如何分别发送和插入dataContainer值，并独立于所有

dataContainers？我在Google周围搜索，我找不到任何方法可以做到这一点，我知道这是可能的，我将非常感谢给出的任何代码建议。

我希望能够在每个dataContainer中按下按钮，并分别独立地发送每个dataContainer中的输入值，而不会触发所有其他dataContainer到页面x.php。

目前，它仅获得第一个dataContainer输入值。

这是代码

index.php

<style>
    .dataContainer{
      background-color: red;
      width: 185px;
      position: relative;
    }

    .dataContainerDesign #a,#b,#send{
      display: block;
      margin: auto;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
      $('.dataContainer #send').click(function(){
    	//Per data container
    	var $dataContainer = $(this).next('.dataContainer');
    	//

        //Var data structure
        var a= $('.dataContainer #a').val();
        var b= $('.dataContainer #b').val();
        //

        //Data to be sent
        var Data= {
          a: a,
          b: b
        }
        //

        //Result after sending
        var Result= function(success){
       $dataContainer.html(success);
        }
        //

    	//Request
        $.ajax({
          type: 'POST',
          data: Data,
          url: 'x.php',
          success: Result
        });
    	//

      });
    });
    </script>

    <div class='dataContainer dataContainerDesign'>
      <input id='a' type='text'>
      <input id='b' type='text'>
      <button id='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input id='a' type='text'>
      <input id='b' type='text'>
      <button id='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input id='a' type='text'>
      <input id='b' type='text'>
      <button id='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input id='a' type='text'>
      <input id='b' type='text'>
      <button id='send'>Send</button>
    </div><!--</dataContainer>-->

x.php

<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>

<?php

/*<Insert values into Data Base>*/

$db_servername = 'localhost';
$db_username = 'jd';
$db_password = '1234';
$db_name = 'xxx';

$db_connect = new mysqli($db_servername, $db_username, $db_password, $db_name);

$db_query = "INSERT INTO sometable (a,b) VALUES ('$a','$b')";

$db_result= $db_connect->query($db_query);

/*</Insert values into Data Base>*/

?>

最佳答案

将id属性更改为class。

$('.dataContainer .send').click(function() {
  //Per data container
  var $dataContainer = $(this).closest('.dataContainer');

  //Var data structure
  var a = $dataContainer.find('.a').val();
  var b = $dataContainer.find('.b').val();

  //Data to be sent
  var Data = {
    a: a,
    b: b
  };

  console.log(Data);

  //Result after sending
  var Result = function(success) {
    $dataContainer.html(success);
  };

  //Request
  $.ajax({
    type: 'POST',
    data: Data,
    url: 'x.php',
    success: Result
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dataContainer dataContainerDesign'>
  <input class='a' type='text' value="test1">
  <input class='b' type='text' value="test2">
  <button class='send'>Send</button>
</div>
<!--</dataContainer>-->

关于javascript - 每个类分别发送和插入容器值。怎么样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49472465/