Получить data-id из URL с помощью javascript ajax

Question

Я застрял, чтобы получить значение data-id из URL.После того, как пользователь щелкнет ссылку редактирования в URL, я хочу показать данные в модальном диалоге.Я использую сценарий ajax, но он не работает четко.Модальное диалоговое окно показывает предупреждение об ошибке.

Это мой class_view.php

<script>
    $(document).ready(function(){   
      $(".edit").on('click', function(e){       
            var id = $(e.relatedTarget).data('id');
                    $.ajax({
                    type: 'post',
                    url: "class/edit_class_form.php",
                    data: 'id=' + id,
                    success: function(data){
                        $('.show_class').html(data);
                    }
                    });

            });
         });
</script>
        <table width="40%">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>Kode</th>
                    <th>Name</th>
                    <th>Capacity</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <?php
                    $query  = $db->prepare("SELECT * FROM class ORDER BY name ASC");
                    $query->execute();
                    for($no=1; $data = $query->fetch();){
                ?>
                <tr>
                    <td><?php echo $no++;?></td>
                    <td><?php echo $data['code'];?></td>
                    <td><?php echo $data['type']." ".$data['name'];?></td>
                    <td><?php echo number_format($data['capacity'], 2, '.', ',');?> Ton</td>
                    <td><a href="#edit_form" class="edit" data-id="<?php echo $data['id'];?>">edit</a>
                    </td>
                </tr>   
                <?php };?>
                </tbody>
            </table>
            </div>
            <?php
                include 'setting/class/edit_class_form.php';
            ?>

Я использую чистый модальный CSS.Это код моего edit_class_form.php

    <div id="edit_form" class="modal">
        <div class="md-medium">
            <a href="#close" title="Close" class="close" id="close">X</a>
            <h2>Edit Class</h2>     
            <form method="post" action="setting/class/edit_class_update.php" id="form" autocomplete="off">
            <div class="md-content">
            <table class="show_class">
                <?php
                  require '../../inc/koneksi.php';
                  if($_POST['id']){
                      $id=$_POST['id'];
                      $stmt = $db->prepare("SELECT * FROM class WHERE id=:id");
                      $stmt->execute(array(':id' => $id));
                ?>
               <?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)){?>
                <tr>
                    <td>Class Code</td>
                    <td><input type="text" name="code" size="5" maxlength="3" value="<?php echo $row['code'];?>" required></td>
                </tr>
                <tr>
                    <td>Class Type</td>
                    <td><input type="text" name="type" size="10" maxlength="5" value="<?php echo $row['type'];?>" required></td>
                </tr>
                <tr>
                    <td>Class Name</td>
                    <td><input type="text" name="name" size="40" maxlength="35" value="<?php echo $row['name'];?>" required></td>
                </tr>
                <tr>
                    <td>Capacity</td>
                    <td><input type="text" name="capacity" size="15" value="<?php echo $row['capacity];?>"maxlength="11" required> Persons</td>
                </tr>
            </table>
            <?php }}?>
            </div>
            <div class="md-footer">
                <a href="#close" id="cancel">Cancel</a>
                <input type="submit" value="insert"">
            </div>
            </form>
            </div>
        </div>

Можете ли вы мне помочь?

Answer 1

Таким способом вы можете получить data-id элемента, затем вы можете добавить значение к url для вашего вызова ajax, и ваши данные должны быть объектом

  data: {id: id}

Вы также можете var_dump ($ _ POST) проверить, что вы получаете в PHP

$(document).ready(function() {
  $(".edit").on('click', function(e) {
    $this = $(this);
    const id = $this.data("id")
    $.ajax({
      type: 'post',
      url: "class/edit_class_form.php",
      data: {
        id: id
      },
      success: function(data) {
        $('.show_class').html(data);
      }
    });


  });
});

.edit {
  cursor: pointer;
  background: green;
  width: 90px;
  padding: 20px;
  text-align: center;
  color: #fff;
}

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

<div class="edit" data-id="5445454">Click me </div>