Question

我要做的是记录在页面上动态创建的奖学金的记录号，并将结果发布到服务器，而无需刷新页面。现在可以使用，但是问题是它读取ID，并且始终仅返回列表中的第一项＃。

列出每个奖学金的模态代码如下：

 <!-- Trigger the modal with a button -->
 <button type="button" onclick="saveData()" value="<? echo $row['id'];  ?>" 
id="savedata" class="btn btn-info btn-lg" class="saveData" data- 
toggle="modal" data-target="#myModal<? echo $row['id']; ?>">More Information. 
</button>

我没有包含模态的所有信息，但是我很确定问题出在代码的按钮部分。

单击按钮时运行的代码的ajax部分是：

<script>
function saveData(){

  var name=$('#savedata').val();



$.ajax({
   type:"post",
   url:"includes/post_scholarship_count.php",
   data:'name='+name,


});

}
</script>

问题是，当您单击任何奖学金时，您都会获得第一个奖学金价值，即使我可以看到页面显示了每个奖学金都有独特的价值。我的假设是，因为它的ID仅会采用第一个值。如何在ajax脚本中获取变量以从HTML CLASS读取而不是从ID读取？

几天来我一直在尝试解决此问题，因此将不胜感激。

Answer 1

您在这里有一个基本问题，下面是。我假设您有很多奖学金，因此有很多按钮。 ID html属性仅用于命名页面中的唯一元素。如上所见，您正在引用：#savedata，它将始终仅引用单个元素。

因此，我的建议如下，其中包括一些内容：

使用简洁的javascript处理按钮事件
使用HTML类属性而不是唯一的ID来引用按钮。

所以我们在这里解释一下

使用不引人注目的JavaScript和html类属性来附加事件

代替使用ID #saveData，只需使用'saveData'类属性，然后执行以下操作即可：

$(document).ready(function(evt){
    $('.saveData').on('click', function(e){
        var name = $(this).val();
        $.ajax({
            type:"post",
            url:"includes/post_scholarship_count.php",
            data:'name='+name,
        });
    });
});

此代码将使用类saveData拾取所有按钮，并将它们附加给事件以处理其单击。并且它将分别识别每个按钮。由于每个按钮都附有一个单独的“点击侦听器”，因此，一旦您单击一个按钮，它将知道该怎么做。

Answer 2

您可以使用纯Javascript按类访问元素。

var name = document.getElementsByClassName("saveData");

但是，您将获得一系列元素！也许您必须遍历此数组才能获取值。

Answer 3

您好，这是一种使用php生成的表的方法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
  <div class="container" id="exampleDiv">
    <?php
    $arrayName =array(
      array('Firstname' => 'Stan','Lastname' => 'Chacon', 'Middlename' => '', 'Nickname' => 'Zec' ),
      array('Firstname' => 'Annie','Lastname' => 'Smith', 'Middlename' => 'Derav', 'Nickname' => 'AnnieDSmith' ),
      array('Firstname' => 'Winnie','Lastname' => 'Pooh', 'Middlename' => '', 'Nickname' => 'WinnieTPooh' ),
    );
    //append an id to your table also a tbody
    $html="<table id='exampleTable' class='table table-striped' ><tr><th style='border: 2px solid grey;'>Firstname</th>
    <th style='border: 2px solid grey;'>Lastname</th>
    <th style='border: 2px solid grey;'>Middlename</th>
    <th style='border: 2px solid grey;'>Nickname</th>
    <th style='border: 2px solid grey;'>Action</th></tr><tbody>";

    foreach ($arrayName as $key => $value) {
      if (isset($value)) {
        $html.="<tr><td>{$value['Firstname']}</td><td>{$value['Lastname']}</td><td>{$value['Middlename']}</td><td>{$value['Nickname']}</td><td> <button type='button' name='buttonModal'>click me !</button></td></tr>";
      }
    }

    $html.="</tbody></table>";
    echo $html;

    ?>
  </div>

  <!-- The Modal -->
 <div class="modal fade" id="myModal">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">

       <!-- Modal Header -->
       <div class="modal-header">
         <h4 class="modal-title">Modal Heading</h4>
         <button type="button" class="close" data-dismiss="modal">&times;</button>
       </div>

       <!-- Modal body -->
       <div class="modal-body">
       </div>

       <!-- Modal footer -->
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       </div>

     </div>
   </div>
 </div>

  </body>
  <script type="text/javascript">

    $("#exampleTable tbody tr td button").on('click',function(){
    var Firstname = $(this).closest('tr').children('td:first').text();
    var Lastname = $(this).closest('tr').children('td:eq(1)').text();
    var Middlename = $(this).closest('tr').children('td:eq(2)').text();
    var Nickname = $(this).closest('tr').children('td:eq(3)').text();

    if (Firstname != undefined && Lastname != undefined && Middlename != undefined && Nickname !=undefined) {
      $('.modal-body').empty();
      $("#myModal").modal();
      $('.modal-body').append('<p>Hello '+Firstname+' '+ Lastname+' looks like the Nickname '+Nickname+' is already in use!! Pls try to use another one</p>')
    }
    })

  </script>
</html>

希望有帮助！

我如何获取Ajax以从多个HTML类元素读取数据

3 个答案: