Récupération de données php avec Ajax

**philippepetit** · 15/07/2019, 22h45

bonjour,

en suivant un tuto j'ai réussi (laborieusement) à mettre en place un formulaire ajax php json qui fonctionne sans liaison avec ma bdd. J'aimerais maintenant qu'il soit en lien avec ma bdd.

je pensais qu'il suffisait d'établir la connexion à la bdd et de récupérer les données par une requête php comme :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
 global $con;
 include_once 'connexionMysql.php';
// RECUPERATION D'UN ENREGISTREMENT
 
$peudo=$_POST['pseudo'];
$password=$_POST['password'];
 
$sql = "SELECT pseudo, password, score, varpage, varclic, scoresee, varm, varmdir, vary, varydir, vare, varedir1, varedir2, varc3dir, vargsdir, varn, vars, varcolosdir, varo, varmastadir1, varmastadir2, vari, vark, varkdir1, varkdir2, varkdir3, varr, varrdir FROM diamant WHERE pseudo = '$pseudo' and password = '$password'";
$resultat = $con->query($sql);
 
// on fait une boucle qui va faire un tour pour chaque enregistrement
while($data = mysqli_fetch_assoc($resultat))
    {
// on affiche les informations de l'enregistrement en cours
 
	$pseudob=$data['pseudo'] ;
	$passwordb=$data['password'] ;	
	$scoreb=$data['score'] ;
       $varpageb=$data['varpage'] ;
	$varclicb=$data['varclic'] ;
	$varmb=$data['varm'] ;
	$varyb=$data['vary'] ;
 
    }
 
?>

Mais j'ai essayé de mettre ce code dans mon fichier php en lieu et place des variables définies mais cela ne me renvoie pas les données de la bdd (au mieux cela renvoie "NULL"

Voici le fichier ajax_test.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
      $(".js-ajax-php-json").submit(function(){
        var data = {
          "action": "test"
        };
        data = $(this).serialize() + "&" + $.param(data);
        $.ajax({
          type: "POST",
          dataType: "json",
          url: "ajax_retour.php", 
          data: data,
          success: function(data) {
            $(".return").html(
                                "<input type='text' id='pseudob' name='pseudob' value='" + data["pseudo"] + "' style='width:100px';><br>" +
                                "<input type='text' id='passwordb' name='passwordb' value='" + data["password"] + "' style='width:100px';><br>" +
                                "<input type='text' id='scoreb' name='scoreb' value='" + data["score"] + "' style='width:100px';><br>" +
                                "<input type='text' id='varpageb' name='varpageb' value='" + data["varpage"] + "' style='width:100px';><br>" +
                                "<input type='text' id='varclicb' name='varclicb' value='" + data["varclic"] + "' style='width:100px';><br>" +
                                "<input type='text' id='varmb' name='varmb' value='" + data["varm"] + "' style='width:100px';><br>" +
                                "<input type='text' id='varyb' name='varyb' value='" + data["vary"] + "' style='width:100px';><br><br>" 
 
            );
 
            alert("Le formulaire a ete transmis avec succes.\nBonjour " + data["pseudo"] + " ton score est de : " + data["score"]);
          }
        });
        return false;
      });
    });
    </script>
    </head>
    <body>
    <form action="ajax_retour.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
		<input type="text" name="pseudo" value="" placeholder="Pseudo" />
		<input type="text" name="password" value="" placeholder="password" /><br><br>
		<input type="text" id="score" name="score" value="" style="width:50px"; hidden>
		<input type="text" id="varpge" name="varpage" value="" style="width:50px"; hidden>
		<input type="text" id="varclic" name="varclic" value="" style="width:50px"; hidden>
		<input type="text" id="varm" name="varm" value="" style="width:50px"; hidden>
		<input type="text" id="vary" name="vary" value="" style="width:50px"; hidden>
		<input type="submit" name="submit" value="Envoyer"  />
    </form>
 
    <div class="return">
      Retour des donn&eacute;es ajax
    </div>
    </body>
    </html>

et le fichier ajax_retour.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
 
if (is_ajax()) {
  if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
    $action = $_POST["action"];
    switch($action) { //Switch case for value of action
      case "test": test_function(); break;
    }
  }
}
 
//Function to check if the request is an AJAX request
function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
 
function test_function(){
  $return = $_POST;
 
	//ici les variables définies à remplacer par les valeurs de la requête mysql
 
	$pseudob=$_POST['pseudo'];
	$passwordb=$_POST['password'];
	$scoreb="7";
	$varpageb="150";
	$varclicb="30";
	$varmb="1";
	$varyb="1";
 
	if ($return["score"] == ""){
	$return["pseudo"] = $pseudob;	
	$return["password"] = $passwordb;	
    $return["score"] = $scoreb;
	$return["varpage"] = $varpageb;
	$return["varclic"] = $varclicb;
    $return["varm"] = $varmb;
	$return["vary"] = $varyb;
  }
 
  $return["json"] = json_encode($return);
  echo json_encode($return);
}
?>

Quelqu'un pourra peut-être me dire si ce que je veux faire est possible et/ou si je fais totalement fausse route en voulant modifier mon fichier php de cette façon et/ou si le tuto que j'ai suivi ne concerne en rien une liaison avec une bdd.

Ma bdd en ligne est parfaitement opérationnelle et je sais faire ce que je demande sans ajax (seulement avec php, mysql) mais bien sûr c'est la liaison avec ajax qui m'intéresse.

Par avance merci

**NoSmoking** · 18/07/2019, 08h25

Bonjour,
tu peux regarder ce que te retourne ta requête en plaçant un console.log(data) dans ta function success.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
success: function(data) {
  console.log("data :",  data);
  // ...
}

Invité · 18/07/2019, 10h30

Bonjour,

1- Pour commencer, il faut corriger les erreurs et incohérences :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$resultat = $con->query($sql);
...
while($data = mysqli_fetch_assoc($resultat))

Utilisation des syntaxes "orienté objet" et "procédural" : il faut choisir !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		<input type="text" id="score" name="score" value="" style="width:50px"; hidden>

point-virgule mal placé, et pas de fermeture de la balise (auto-fermante) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		<input type="text" id="score" name="score" value="" style="width:50px;" hidden />

2- Ensuite, ce serait bien de nous expliquer plus clairement ce que tu veux faire (ce que tu as au départ -> ce que tu veux obtenir) :

Enregistrer les données d'un formulaire SANS rechargement de page (ce qui justifie Ajax) ?
C'est un formulaire d'AJOUT ou de MODIFICATION ?
name="pseudo" (formulaire) -> name="pseudob" (retour Ajax) : ça veut dire quoi ?
... ?

Quand ce sera plus clair, on pourra te donner la marche à suivre.

**philippepetit** · 18/07/2019, 13h06

bonjour,
cela me retourne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
GEThttp://philippe972.alwaysdata.net//diamanthtml5/deuxpageseanim/ajax_test.html
[HTTP/1.1 304 Not Modified 314ms]
 
GEThttp://code.jquery.com/jquery-1.11.0.min.js
[HTTP/1.1 304 Not Modified 35ms]
 
L’encodage de caractères du document HTML n’a pas été déclaré. Le document sera affiché avec des caractères incorrects pour certaines configurations de navigateur si le document contient des caractères en dehors de la plage US-ASCII. L’encodage de caractères de la page doit être déclaré dans le document ou dans le protocole de transfert. ajax_test.html
GEThttp://philippe972.alwaysdata.net/favicon.ico
[HTTP/1.1 404 Not Found 0ms]
 
XHRPOSThttp://philippe972.alwaysdata.net//diamanthtml5/deuxpageseanim/ajax_retour.php
[HTTP/1.1 200 OK 313ms]
 
URL de la requête :http://philippe972.alwaysdata.net//diamanthtml5/deuxpageseanim/ajax_retour.php
Méthode de la requête :POST
Adresse distante :[2a00:b6e0:1:20:5::1]:80
Code d’état :
200
Version :HTTP/1.1
 
En-têtes de la réponse (234 o)	
En-têtes bruts
Content-Encoding	
gzip
Content-Length	
223
Content-Type	
text/html; charset=UTF-8
Date	
Thu, 18 Jul 2019 11:00:38 GMT
Keep-Alive	
timeout=5, max=499
Server	
Apache/2.2
Vary	
Accept-Encoding
Via	
1.1 alproxy
En-têtes de la requête (604 o)	
En-têtes bruts
Accept	
application/json, text/javascript, */*; q=0.01
Accept-Encoding	
gzip, deflate
Accept-Language	
fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Connection	
keep-alive
Content-Length	
82
Content-Type	
application/x-www-form-urlencoded; charset=UTF-8
Host	
philippe972.alwaysdata.net
Origin	
http://philippe972.alwaysdata.net
Referer	
http://philippe972.alwaysdata.…/deuxpageseanim/ajax_test.html
User-Agent	
Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/70.0
X-Requested-With	
XMLHttpRequest

**Toufik83** · 18/07/2019, 14h44

En plus des suggestions en dessus, ajoutes le callback error dans ajax pour t'assurer qu'il n y a pas d'erreur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 $.ajax({
          type: "POST",
          dataType: "json",
          url: "ajax_retour.php", 
          data: data,
          success: function(data) {....},
          error:function(err){alert("Erreur ajax :",err.responseText);}
 });

**NoSmoking** · 18/07/2019, 16h43

Ma bdd en ligne est parfaitement opérationnelle ...

peut être mais pas ton code, on peut voir dans la réponse

Fatal error: Uncaught Error: Call to a member function query() on null in /home/philippe972/www/diamanthtml5/deuxpageseanim/ajax_retour.php:49
Stack trace:
#0 /home/philippe972/www/diamanthtml5/deuxpageseanim/ajax_retour.php(33): test_function()
#1 {main}
thrown in /home/philippe972/www/diamanthtml5/deuxpageseanim/ajax_retour.php on line 49

.. suit le conseil de Toufik83.

**philippepetit** · 01/08/2019, 00h35

Bonsoir,
Merci à tous de vos réponses
Ma question n'était pas très claire du fait mon manque de connaissance du fonctionnement d'ajax.
Je souhaitais, à partir d'un formulaire avec la saisie d'un couple pseudo / password, obtenir les données bdd liées à ce couple sous la forme d'inputs exploitable ensuite en php

avec ce qui suit, j'obtiens ce que je voulais

le code html essai4.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    function information() {
        var pseudo = $('#pseudo').val();
        var password = $('#password').val();
        $.ajax({
            type: "POST",
            url: "essai4.php",
            data: { pseudo: pseudo, password: password }
        }).done(function (result) {
            $("#message").html(result);
        });
    }
</script>
</head>
<body>
<table>
<tr>
<td>Pseudo:</td>
<td><input type="text" name="pseudo" id="pseudo" /><td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password" id="password" /><td>
</tr>
<tr>
<td></td>
<td><input type="button" name="submit" id="submit" value="Envoyer" onClick = "information()" /></td>
</tr>
</table>
<div id="message"></div>
</body>
</html>

et le code php essai4.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
 
$pseudo = $_POST['pseudo'];
$password = $_POST['password'];
 
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_SERVER', 'localhost');
define('DB_NAME', 'xxxxxxx');
if (!$db = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME)) {
 die($db->connect_errno.' - '.$db->connect_error);
}
 
$sql = "SELECT score, varpage, varclic from diamant where pseudo='".$pseudo."' AND password='".$password."'";
 
$result = $db->query($sql) or die($mysqli->error);
 
$row=mysqli_fetch_assoc($result);
 
$json = json_encode($row);;
 
$obj = json_decode($json);
 
echo "score ...... "."<input type='text' id='score' name='score' value='" .$obj->{'score'}."' style='width:100px';><br>";
echo "varpage .. "."<input type='text' id='varpage' name='varpage' value='" .$obj->{'varpage'}."' style='width:100px';><br>";
echo "varclic .... "."<input type='text' id='varclic' name='varclic' value='" .$obj->{'varclic'}."' style='width:100px';>";
?>