[AJAX] Gérer un tableau dynamique
Bonjour,
Je commence à appréhender ajax.
pour le moment, j'ai une base de données et sur une page html j'affiche les données de ma base dans un tableau.
Grâce à ajax j'arrive à afficher les données dernièrement insérer sans avoir à actualiser ma page. Mais j'aimerai arriver maintenant (via un bouton sur chaque ligne) à supprimer les enregistrements de ma base et du tableau par la meme occasion.
Mais je n'y arrive pas.
J'ai une seule table appelé :
Test_ajax
elle se compose de 4 champs :
- id_champ qui est l'identifiant (auto-incrémenté)
- contact
- description
- travail
test_ajax.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
header("Content-Type: text/html; charset=iso-8859-1");
mysql_connect("**","**","**");
mysql_select_db("**");
if (isset($_POST['contact']) && isset($_POST['description']) && isset($_POST['travail']))
{
if (!empty($_POST['contact']) && !empty($_POST['description']) && !empty($_POST['travail']))
{
mysql_query("INSERT INTO Test_ajax(contact,description,travail) VALUES('".$_POST['contact']."', '".$_POST['description']."', '".$_POST['travail']."')");
}
}
$reponse = mysql_query("SELECT * FROM Test_ajax");
echo '<table border=1>';
while($val = mysql_fetch_array($reponse))
{
echo '<tr><td>'.$val['id_champ'].'</td><td>'.$val['contact'].'</td><td>'.$val['description'].'</td><td>'.$val['travail'].'</td><td><input type="button"></td></tr></td>';
}
echo '</table>';
?> |
et test_ajax.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
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
64
65
66
67
68
69
|
function getXMLHttpRequest()
{
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject)
{
if (window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
xhr = new XMLHttpRequest();
}
}
else
{
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;
}
var xhr = getXMLHttpRequest();
function refreshpage()
{
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
document.getElementById('test_ajax').innerHTML = xhr.responseText;
}
};
xhr.open("GET", "test_ajax.php", true);
xhr.send(null);
var timer=setInterval("refreshpage()", 5000);
}
function submitpage()
{
var xhr = getXMLHttpRequest();
encode (encodeURIComponent)
var contact = encodeURIComponent(document.getElementById('contact').value);
var description = encodeURIComponent(document.getElementById('description').value);
var travail = encodeURIComponent(document.getElementById('travail').value);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
document.getElementById('test_ajax').innerHTML = xhr.responseText;
}
};
xhr.open("POST", "test_ajax.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("contact="+contact+"&description="+description+"&travail="+travail);
} |
Merci d'avance de votre aide.
