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

Version imprimable

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:

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:

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:

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

18/07/2019, 08h25
NoSmoking
Bonjour,
tu peux regarder ce que te retourne ta requête en plaçant un console.log(data) dans ta function success.
Code:

1 2 3 4 success: function(data) { console.log("data :", data); // ... }
18/07/2019, 10h30
Invité
Bonjour,

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

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:

<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:

<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 ? :koi:
- ... ?
Quand ce sera plus clair, on pourra te donner la marche à suivre.

bonjour,
cela me retourne

Code:

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

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

Code:

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

18/07/2019, 16h43
NoSmoking

Citation:

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

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

Citation:

<br />
<b>Fatal error</b>: 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 <b>/home/philippe972/www/diamanthtml5/deuxpageseanim/ajax_retour.php</b> on line <b>49</b><br />

.. suit le conseil de Toufik83.

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:

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:

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';>";
?>

score, varpage et varclic étant les variables que je voulais récupérer dans des "inputs text"

Cordialement

01/08/2019, 10h41
NoSmoking

:koi: aucunes vérifications côté serveur !
01/08/2019, 10h47
Invité
Bonjour,

je me permets d'ajouter :

:alerte: on NE mets JAMAIS le mot de passe EN CLAIR dans la bdd !
- password_hash() / password_verify()
01/08/2019, 14h26
philippepetit

Merci NoSmoking, merci Jreaux
Je cherchais juste un bout de code Ajax/PHP, pour le reste, je devrais pouvoir me débrouiller.
Cordialement