請求 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;
    });

希望它有幫助；）快樂編碼