How to retrieve and use data from an AJAX query

Question

I have an Ajax query:

$(document).ready(function(){   
  $("#amis_commun_liste .afficher_plus_modal").bind('click',function f(){
    var afficher_plus_modal = $(this).attr("class");
    var id = "<?php  echo $_GET['id']; ?>";

    $(this).unbind('click',f);
    $.ajax({
      type: "post",
      url: "voir_profil_includes/func_infos.php",
      data: {
        "afficher_plus_modal": afficher_plus_modal,
        "id" : id           
      },
      beforeSend: function() {
        $("#amis_commun_liste .afficher_plus_modal").html("En cours");
      },
      success: function(data) {
        if (data =="success") {                          
          //Treatment area after successful operation
        }
      }
    });
  });
});

The Ajax query calls this php / mysql query into func-infos.php:

if (!empty($_POST['afficher_plus_modal'])) {
   require("../voir_profil_includes/connect_db.php");
    $infos = [];
    $q = $bdd->prepare(" SELECT u.id,
  u.nom, u.prenom, u.avatar,u.couverture
FROM users u
INNER JOIN
(
  SELECT id_exp, id_des
  FROM friends
  WHERE id_exp IN(:id_exp, :id_des)
    AND active = 1
  UNION
  SELECT id_des, id_exp
  FROM friends
  WHERE id_des IN(:id_exp, :id_des)
    AND active = 1
) tmp ON tmp.id_des = u.id
GROUP BY u.id
HAVING COUNT(*) = 2
ORDER BY RAND() LIMIT 5
");
     $q->execute(array(
                    "id_exp" => $_POST["id"],
                    "id_des" => info_profil()->id
                    ));
      while ($info = $q->fetch(PDO::FETCH_OBJ)) {
             $infos[] = $info;               
             }      
     // return data after operation
        return $infos;
     //informs Ajax that the operation has been carried out
     echo "success";
}

This code does not produce errors but I do not know how I could retrieve the data returned from func_infos.php to update the "list_am_commun.php" page by displaying the new data in list_am_commun.php.
Thank you but I know it will not be a simple job.

Mario Rawady · Answer 1 · 2017-10-20T17:08:10.783

1

Add dataType to the ajax call as below:

$.ajax({
  dataType: "json",
  type: "post",

And then change your your php to look as the below:

echo json_encode($info) ;

without echo 'success';

And in your ajax return the data will be returned as an object and you can access it by

data.{objectName}

Updated

Your javascript should look like the below:

$(document).ready(function(){   
$("#amis_commun_liste .afficher_plus_modal").bind('click',function f(){
    var afficher_plus_modal = $(this).attr("class");
    var id = "<?php  echo $_GET['id']; ?>";

    $(this).unbind('click',f);
    $.ajax({
      type: "post",
      dataType: "json", //I added this line, to force the returned data to be formatted as json
      url: "voir_profil_includes/func_infos.php",
      data: {
        "afficher_plus_modal": afficher_plus_modal,
        "id" : id           
      },
      beforeSend: function() {
        $("#amis_commun_liste .afficher_plus_modal").html("En cours");
      },
      success: function(data) {
        console.log(data) ; //Console the returned data, and you can then treat is as you wish.
      }
    });
  });
});

In your php:

Remove echo "success"; and replace it with echo json_encode($infos);

This must solve your problem

edited Oct 20 '17 at 17:08

answered Oct 20 '17 at 14:45

Mario Rawady

871
7
17

I understand nothing of all that you say, I know nothing of json, is there any other way of solving this, or you think I ought to learn its strength. – kam Oct 20 '17 at 15:04
i have tried console.log(data) but log print [object object]. – kam Oct 20 '17 at 17:28
You can expand it in the arrow on its left. When you expand it, you can then see all the objects inside of it – Mario Rawady Oct 20 '17 at 17:29
I am not working in console but in my project in the text editor. I am beginner – kam Oct 20 '17 at 17:42
Then you must loop in the object and retreive the info you need – Mario Rawady Oct 20 '17 at 17:43
How I am beginner ? – kam Oct 20 '17 at 17:53
it works but it returns results with brackets and quotation marks, how can I delete them? thanks – kam Oct 20 '17 at 19:00
I always use the same concept and even if I have string values they are returned without quotation. You must handle this issue in your php code. Do you have a debugger ? Or you may check your database, maybe the values are being saved with the quotes – Mario Rawady Oct 21 '17 at 15:15
I am using that code: " var myJSON = JSON.stringify(data); alert(myJSON) " in my jquery code and the values are not being saved with the quotes I have not debugger AND I test it from the server in the browser – kam Oct 21 '17 at 17:42
It returns all the data, how I can recover the precise data that I want. For example: retrieve the name only. – kam Oct 21 '17 at 18:26
Its return me that: [{"name":"Skip","age":2,"favoriteFood":"Steak"}] – kam Oct 21 '17 at 18:40
I have tried that "alert(data.name);" but I see "undefined".What do you think about ? – kam Oct 21 '17 at 21:17

How to retrieve and use data from an AJAX query

1 Answers1