[AJAX] Envoi des données du formulaire par POST
Bonjour à tous,
Je viens de commencer à travailler avec AJAX et j'aimerais faire une suppression comme cela se fait sur nos boites mail tel que Yahoo ou Hotmail.
Le code de creation du formulaire se présente comme suit :
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
| <article>
<div id="article"> Liste Des Articles </div>
<div id="action">
<a href="ajout.php"> Ajouter </a> <a href="javascript:suppressionArticle()"> Supprimer </a>
</div>
<br clear="all"/>
<form name="formlistarticle">
<table id="listearticle">
<thead>
<tr>
<th> <input type="checkbox" name="checkArticle" onclick="toutSelectionner()"/> </th>
<th> Nom </th>
<th> Internaute </th>
<th> Date </th>
<th> Commentaire </th>
</tr>
</thead>
<tbody>
<?php
$mapper = new ArticleMapper() ;
$result = $mapper->find((isset($_GET['categorie'])?$_GET['categorie']:0)) ;
foreach($result as $article) {
echo "<tr> " .
"<td> <input type='checkbox' name='deleteArticle[]' value='" . $article->getIdArticle() . "'/> </td>" .
"<td> " . $article->getNomArticle() . " </td>" .
"<td> " . $article->getNomInternaute() . " </td>" .
"<td> " . $article->getDate() . " </td>" .
"<td> " . $article->getCommentaire() . "</td>" .
"</tr>" ;
}
?>
</tbody>
</table>
</form>
</article> |
Le code JavaScript est le suivant :
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
| function suppressionArticle() {
var inputs = document.forms["formlistarticle"].elements["deleteArticle[]"] ;
inputLength = inputs.length ,
ids = "" ;
for (var i = 0 , li = inputs.length ; i < li ; i++) {
if (inputs[i].checked) {
if (ids != "") {
ids += "&" ;
}
ids += "deleteArticle[]=" + inputs[i].value ;
}
}
alert(ids) ;
var xhr = new XMLHttpRequest() ;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
suppressionLigne() ;
readData(xhr.responseXML) ;
}
} ;
xhr.open("GET" , "supprimer.php?" + ids , true) ;
xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded") ;
xhr.send(null) ;
}
function suppressionLigne() {
var tbody = document.getElementsByTagName("tbody") ;
while (tbody[1].hasChildNodes()) {
tbody[1].removeChild(tbody[1].firstChild) ;
}
}
function readData(oData) {
var nodes = oData.getElementsByTagName("article") ;
var oTbody = document.getElementsByTagName("tbody");
for (var i ; i < nodes.length ; i++) {
var tr = document.createElement("tr") ;
var input = document.createElement("input") ;
input.type = "checkbox" ;
input.name = "deleteArticle" ;
input.value = nodes[i].getAttribute("id") ;
var tds = [
document.createElement("td").appendChild(input) ,
document.createElement("td").appendChild(nodes[i].getAttribute("nom")) ,
document.createElement("td").appendChild(nodes[i].getAttribute("internaute")) ,
document.createElement("td").appendChild(nodes[i].getAttribute("date")) ,
document.createElement("td").appendChild(nodes[i].getAttribute("commentaire"))
] ;
tr.appendChild(tds[0]) ;
tr.appendChild(tds[1]) ;
tr.appendChild(tds[2]) ;
tr.appendChild(tds[3]) ;
tbody.appendChild(tr) ;
}
} |
Le code php5 du fichier supprimer.php est le suivant :
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
| header("Content-Type: text/xml") ;
echo '<?xml version="1.0" encoding="utf-8"?>' ;
echo '<articles>' ;
print_r($_GET) ;
if (isset($_GET['deleteArticle[]'])) {
$ids = array(htmlentities($_GET['deleteArticle[]'])) ;
$mapper = new ArticleMapper() ;
$mapper->delete($ids) ;
$result = $mapper->find(0) ;
foreach ($result as $article) {
echo '<article id="' . $article->getIdArticle() . '" ' .
' nom="' . $article->getNomArticle() . '" '.
' internaute="' . $article->getNomInternaute() . '" ' .
' date="' . $article->getDate() . '" '.
' commentaire="' . $article->getCommentaire() . '" '.
'/>' ;
}
}
echo '</articles>' ;
?> |
Malheureusement ça ne marche pas.
