Test AJAX et MYQL

**didio** · 21/04/2017, 12h31

Bonjour,

J'ai développé une application php lié à une BDD MSQL et je souhaite passer à l'AJAX afin d'améliorer l'ergonomie de mon site. Je suis donc en train d'apprendre à utiliser la méthode AJAX.

J'ai adapté un code mais il ne se passe rien ( une liste est censé apparaître ).

Voici mon code 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
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>User interface for Ajax, PHP, MySQL demo</title> 
<meta name="description" content="HTML code for user interface for Ajax, PHP and MySQL demo."> 
<style type="text/css">
body {padding-top: 40px; padding-left: 25%}
li {list-style: none; margin:5px 0 5px 0; color:#FF0000}
</style>
</head>
<body>
<form class="well-home span6 form-horizontal" name="ajax-demo" id="ajax-demo">
<div class="control-group">
              <label class="control-label" for="book">Book</label>
              <div class="controls">
                <input type="text" id="book">
			  </div>
 </div>
 <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>
 </div>
</form>
</body>
</html>

Voici mon code Js :

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
function book_suggestion()
{
var book = document.getElementById("book").value;
var xhr;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book;
     xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
	 xhr.onreadystatechange = display_data;
	function display_data() {
	 if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       //alert(xhr.responseText);	   
	  document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
	}
}

et voici mon code php :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
include('dbopen.php');
$book_name = $_POST['book_name'];
$sql = "select book_name from book_mast where book_name LIKE '$book_name%'";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "".$row['book_name']."";
}
?>

La connection avec la BDD est dans le fichier "dbopen.php".

Lorsque j'active l'évenement lié au bouton, la console me renvoie le code 304.

Comment faire pour que ma liste basée sur ma BDD apparaisse ?

Merci.

Invité · 21/04/2017, 12h41

Bonjour,

mysql_ est obsolète depuis belle lurette....

D'autre part, utiliser jQuery ajax() simplifierait le JS.

Enfin, il y a aussi des tutos ici, sur DVP.

**didio** · 21/04/2017, 12h56

Bonjour,

mysql_ est obsolète depuis belle lurette....

J'utilise des requetes SQL en PDO, je voulais juste appliquer le code tel qu'il était donné mais c'est noté.

Envoyé par jreaux62

D'autre part, utiliser jQuery ajax() simplifierait le JS.

Enfin, il y a aussi des tutos ici, sur DVP.

DVP? un tutoriel axé sur JQuery?

Merci

Invité · 21/04/2017, 13h20

Alors, il faut modifier le code de book-suggestion.php pour y appliquer la syntaxe PDO.

N.B. "DVP" = developpez.net/.com (CE site)

Quant aux recherches :

(formulaire tout en haut à droite) -> "Ajax"

et aussi : jQuery.ajax()

**didio** · 21/04/2017, 16h09

D'accord.

Je vais donc commencer par le JQuerry, il faut inclure un fichier JQuerry depuis http://jquery.com/download/ mais lorsque je tente de récupérer la version compréssé, il n'y a aucun téléchargement j'ai donc récupérer le contenu (copier-coller) pour l'intégrer dans un fichier js.

Mais dès que je tente une simple gestion d'évenement il ne passe rien :

code 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
!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="utf-8" />
 
        <title>Sauts de ligne</title>
 
    </head>
 
 
    <body>
 
        <p>Bonjour et bienvenue sur mon site !<br />
 
        Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.</p>
 
 
        <p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>
 
      <script src="jquery.js"></script>
     <script src="test.js"></script>    
    </body>
 
</html>

le code js :

Code :

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

1
2
3
4
5
$('p').on( 'click', function () {
 
    alert("Quelqu'un a cliqué sur un paragraphe!")
 
});

Le code( ou bibliothèque ) JQuerry est dans le fichier "test.js", les fichiers sont regroupés.

C'est un problème de liens?

Merci

Test AJAX et MYQL

AJAX

Discussions similaires

Partager

Partager