Test AJAX et MYQL

Version imprimable

Test AJAX et MYQL

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:

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:

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:

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.

21/04/2017, 12h41
Invité

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.
21/04/2017, 12h56
didio

Bonjour,

Citation:

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é.

Citation:

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
21/04/2017, 13h20
Invité
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 :
:recherch: (formulaire tout en haut à droite) -> "Ajax"
- forum AJAX
- Les meilleurs cours et tutoriels pour apprendre l'AJAX
et aussi : jQuery.ajax()

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:

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:

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