请求 ajax 不叫好 function

Question

我的请求 AJAX 有问题。 当我单击它时，在此过程中，它会调用另一个 php function，我不需要此请求（功能切换，更改状态）。

http://www.noelshack.com/2022-31-1-1659342824-undefined-index.png

这条有错误的行对应于另一个 function。

我的 HTML：

<table id="list_client_pris" border=1>
      <tr>
        <td>#</td>
        <td>Nom</td>
      </tr>
      <?php

      $clients = $db->query('SELECT * FROM client');

      foreach ($clients as $client) :
      ?>
        <tr id="tr1">
          <td><?php echo $client["id_client"]; ?></td>
          <td><?php echo $client["nom_client"]; ?></td>
          <td><button data-id="<?php echo $client["id_client"]; ?>"  type="button" class="info">Info client</button></td>
          <td><button type="button" class="hide_client" data-id="<?php echo $client["id_client"]; ?>">Masquer client</button></td>
          <td><button data-id="<?php echo $client["id_client"]; ?>" type="button" class="switch">Change statut</button></td>
        </tr>
      <?php endforeach; ?>
    </table>

3 个按钮分别调用它们的 ajax 请求。 第一个按钮（类信息）和最后一个按钮（类切换）之间存在冲突，为什么？ 按钮类的信息调用 function 对应于显示的错误，但不是用最后一个按钮调用的。

我的 JS，请求第一个按钮，信息：

$(".info").click(function () {
    var datas = {
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: {cmd :' id_client', datas},
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });
  });

PHP对应function：

 function read()
{
  global $db;
  $id_client = $_GET['id_client']; **(error showed)**
  $query = $db->prepare("SELECT *,FROM client WHERE id_client = :id_client");
  $query->bindValue(':id_client', $id_client, PDO::PARAM_INT);
  $query->execute();
  $result = $query->fetch(PDO::FETCH_ASSOC);
  return ($result);
} 

我的另一个ajax请求按钮开关：

    $( document ).ready(function(action) {
  $(".switch").click(function () {
    var datas = {id_client_statut: $(this).attr('data-id_statut'),
    };
    $.ajax({
      url: 'function.php',
      type: 'POST',
      data: {cmd:' id_client_statut', datas},
      done: function (click_result) {
        console.log(click_result);
        
        if (click_result.statut=2){
          //transfer to libre
          $('#tr2').append($('#tr1').html());
          $('#tr1').html('');
        }
        }
      }
    );
    });

对应的php function：

function change_statut(){
  global $db;
  $id_client_statut = $_POST['id_client'];
  $query=$db->prepare(" UPDATE alarme INNER JOIN client_alarme ON client_alarme.id_alarme = alarme.id_alarme
INNER JOIN client on client.id_client=client_alarme.id_client     
SET id_statut = 2
WHERE client.id_client= :id_client");
  $query->bindValue(':id_client', $id_client_statut, PDO::PARAM_INT);
  $query->execute();
  $click_result = $query->fetch(PDO::FETCH_ASSOC);
  return ($click_result);
}

我的php function来区分：

    if (isset($_POST['cmd'])){
 if ($_POST['cmd'] == 'id_client_statut') {
      change_statut();
    }
else if ($_POST['cmd'] == 'id_client') {
      read();
  }
}

Answer 1

我真的不明白为什么第一个按钮会调用错误的 function，但设置按钮事件的方式存在问题：通过 onclick，您只是在绑定事件处理程序。

在 function d_info() 中，您目前只告诉单击 button.info 时会发生什么。 function change_statut() 的同义词。 所以目前你必须点击按钮两次。 首先绑定事件，然后再次触发事件（第二次它也会重新绑定事件）。

您应该摆脱 onclick 属性并通过文档就绪事件绑定按钮事件。

$( document ).ready(function() {
  $(".switch").click(function () {
    //...
  });
  $(".info").click(function () {
    //...
  });
});

Answer 2

在您的请求中，您写道：

$(".info").click(function () {
    var datas = {
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: {cmd :' id_client', datas},
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });

但是行data: {cmd:' id_client', datas},给你一个新的 object 女巫是：

data: {
    cmd :' id_client', 
    datas: {
        id_client: $(this).attr('data-id'),
    }
},

现在您可以轻松理解为什么您的 php 在读取$id_client = $_GET['id_client']; **(error showed)**时会出现错误。 $id_client = $_GET['id_client']; **(error showed)**因为您的价值的真实路径是$id_client = $_GET['datas']['id_client'];

但是为什么在创建数据时使用这种语法来准备 ajax 数据 object？

纠正错误的最简单方法是替换数据中的所有 object 参数：

$(".info").click(function () {
    var datas = {
      cmd :' id_client',
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: datas,
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });

希望它有帮助；）快乐编码