Afficher des données avec AJAX par GuillaumeDavid12 - page 1

Bonjour, Je vous explique rapidement l'objectif du code. Il doit afficher des données qui sont dans une bases de données(celle du cours PHP/MySQL). Pour cela j'essaie de les afficher avec AJAX pour pouvoir pratiquer et comprendre un peu plus.

Mais voila cela n'affiche rien. Dans la console cela m'affiche ("Uncaught SyntaxError: Unexpected end of JSON input

at JSON.parse (<anonymous>)

at XMLHttpRequest.request.onload (testajax.js:12))")

code html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet"/>
        <title>Allife - La meilleur facon de tout apprendre !</title>
    </head>
    <body>
        
    <section id='showData'>
        <div class="info">
        
        </div>
        
        <input type="text" id="search" name="search" class="search" placeholder="Tapez votre recherche : ">
        
        </section>
        
        <script src='testajax.js'></script>
    </body>
</html>

code PHP :

<?php 

function dbConnect()
{
    try
    {
        $db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '',array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
        return $db;
    }
    catch(Exception $e)
    {
        die('Erreur : '.$e->getMessage());
    }
}

function getData()
{
    $db = dbConnect();
    $req = $db->query('SELECT nom, possesseur, console, prix, nbre_joueurs_max FROM jeux_video');
    $data = $req->fetch();
    
    echo json_encode($data);
}

code JS :

// Data à afficher en JSON  
//créer une requete XHR qui se connecte au serveur (fichier php)
//recoit les données en JSON et les affiches en HTML
// envoie de la requete


function getData(){
    const request = new XMLHttpRequest();
    request.open("GET", "testajax.php");
    
    request.onload = function(){
        const result = JSON.parse(request.responseText);
        const html = result.map(function(dt){
            return `<div class="message">
          <span class="name">${dt.nom}</span> 
          <span class="possesseur">${dt.possesseur}</span> : 
          <span class="console">${dt.console}</span>
          <span class="prix">${dt.prix}</span>
          <span class="nbre_joueurs_max">${dt.nbre_joueurs_max}</span>
          <span class="commentaires">${dt.commentaires}</span>
         </div>`;  
        });
        const info = document.getElementsByClassName("info");
        
        info.innerHTML = html;

    };
    request.send();  
};
getData();

Malgré mes recherches, je n'ai trouvé aucune solution dans mon cas. Il doit surement y avoir quelque chose que je n'ai pas capté avec l'AJAX.

Merci d'avance.

PS: je n'utilise pas le input dans mon cas car j'essaye d'y aller étape par étape pour l'instant, et donc afficher uniquement les data.

Petite update pour dire que j'ai trouvée une solution à mon problème, je ne sais pas si c'est le plus optimale ("je ne sais pas" ... MDR bien sur qu'il est pas opti) Mais si ça intéresse des gens, voici ma solution :

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readyState == XMLHttpRequest.DONE && this.status == 200 || this.status == 0) {
        var response = JSON.parse(this.responseText);
        console.log(response[0].nom); 
        document.getElementById("show").innerHTML = response[0].nom;
    }
};
request.open("GET", "testajax.php");
request.send();

Il faut savoir que j'ai du traiter avec des objets qui se trouver dans un tableau donc ... Mais cela affiche bel et bien le nom du premier jeu dans la bdd.

-
Edité par GuillaumeDavid12 24 janvier 2020 à 18:54:09

Afficher des données avec AJAX

Afficher des données avec AJAX

Supprimer

Modérer

Signaler le message aux modérateurs