[AJAX] Submit Formulaire

Version imprimable

25/05/2006, 17h01
Azanael

[AJAX] Submit Formulaire

Bonjour,

J'aimerai ajouter de l'AJAX à mon site J2EE. Pour cela, j'utilise XMLHTTPRequest. Pour tout ce qui est lien et bouton, pas de probleme. En revanche je ne sais pas comment faire avec un formulaire et un bouton submit. Pour expliquer un peu mieu, ma page principale est coupée en 3. un header, un menu et un body. En utilisant Ajax, je ne refresh que mon body sans toucher à mon header et mon menu. En gros ma question est comment transmettre mon formulaire par mon XMLHTTPRequest.

Merci de votre aide.

TilesDefinitions :

<component-definitions>
<definition name="intranetLayout" path="intranetLayout.jsp">
<put name="header" value="header.html" />
<put name="menu" value="menu.jsp" />
<put name="body" value="" />
</definition>

<definition name="listeMembresDef" path="listeMembres.jsp"/>

struts-config.xml :

<action path="/listeMembres" type="action.ListeMembresAction" scope="request" validate="false" name="RechercheMembreForm">
<forward name="Success" path="listeMembresDef" redirect="true" />
</action>

Formulaire :

<html:form action="listeMembres" method="post" >
<table>
<tr>
<td>
<html:text property="field" />
<html:select property="type">
<html:option value="0">NOM</html:option>
<html:option value="1">Prénom</html:option>
</html:select>
<input type="submit" value="Rechercher" />
</td>
</tr>
</table>
</html:form>
<html:javascript formName="RechercheMembreForm" />

Ma fonction Ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function SendRequest(fichier)
 {
	 if(window.XMLHttpRequest) // FIREFOX
		  xhr_object = new XMLHttpRequest(); 
	 else if(window.ActiveXObject) // IE
		  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
	 else 
		  return(false); 
	 xhr_object.open("GET", fichier, false); 
	 xhr_object.send(null); 
	 if(xhr_object.readyState == 4) return(xhr_object.responseText);
	 else return(false);
 }

Exemple de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript">
function Validation()
{
 requete = "monfichier.php?nom="+document.form1.nom.value;
 requete = requete + "&prenom="+document.form1.prenom.value;
 SendRequest(requete);
}
</script>
[...]
<form name="form1">
Nom: <input name="nom" type="text" /><br />
Prénom : <input name="prenom" typr="text" /> <br />
<input type="button" value="Valider" onclick="Validation()" />
</form>

26/05/2006, 14h51
_beber85

Euhh je peux te poser une question, pour tu as ajouter du struts pour gerer ton formulaire si tu ne l'utilise meme pas pr la soumission ou la validation ??

Tu peux très bien le soumettre en JS ms à ce moment la n'utilise pas du tout Struts qui ne t'apporte plus rien ...
26/05/2006, 14h54
FremyCompany

return xhr.responseText ==> Reponse du serveur sans actualisation de la page.... Très utile au contraire...
26/05/2006, 15h02
_beber85

bah je suis d'accord que ajax est très utile pr faire des appels asynchrone sans rechargement complet mais si c'est pour l'utiliser dans le cas d'une soumission complete d'un formulaire alors il faut utiliser soit AJAX, soit Struts mais pas les 2 car en l'occurance tu integres un niveau de complexité (struts) qui ne t'apporte rien ... car tu ne l'utilises pas
26/05/2006, 16h12
FremyCompany

Tu as raison, je n'y avais pas pensé...
==> Double sumbit désiré ?
26/05/2006, 16h41
Azanael

Je bloque toujours sur mes formulaires.
En effet, mes formulaires sont des actions form et le submit appel une action (avec ou sans validation).
Le probleme est que j'arrive a appeler l'action par l'XMLHTTPRequest mais toujours pas a transmettre mon formulaire car dans mon action, mon action form reste vide.
26/05/2006, 16h58
FremyCompany

document.getElementById
document.getElementsByName
document.getElementsByTagName
document.forms
==> Seuls reconnus par W3C
====> Pas de document.form1.id mais bien document.getElementById(id) ou document.forms["form1"].elements[name]
26/05/2006, 17h00
_beber85

bah c'est normal, c'est exactement ce qu'on expliquait :)

Soit tu utilises struts et dans ce cas, ton bean est peuplé, ton validate est appelé, puis ton execute/getKeyMethodMap (selon si tu veux plusieurs action)

Soit tu utilises AJAX et dans ce cas, c'est a toi te passer les valeurs que tu veux en POST/GET à ta servlet (et aussi les recuperer à la main)
29/05/2006, 08h53
tosprou

Intéressant ton post, fremy.
Je me demande si c'est pas une source de non compatibilité des scripts sous msie (je parle des scripts qui fonctionnent sous firefox, évidemment)

Non, ces document.forms["nom_form"].element["nom_element"] ne fonctionnent ni sous msie, ni sous fofox... Je reste avec mes bon vieux this.form.nom_element .

Citation:

Envoyé par _beber85

bah c'est normal, c'est exactement ce qu'on expliquait :)

Soit tu utilises struts et dans ce cas, ton bean est peuplé, ton validate est appelé, puis ton execute/getKeyMethodMap (selon si tu veux plusieurs action)

Soit tu utilises AJAX et dans ce cas, c'est a toi te passer les valeurs que tu veux en POST/GET à ta servlet (et aussi les recuperer à la main)

Voila... je sais qu'il est beaucoup trop tard pour répondre au problème mais mieux vaut tard que jamais et puis d'autre pourront résoudre leur souci grâce a mon post...

J'ai trouvé la solution au fait que le formBean ne soit pas peuplé quand on soumets le formulaire via Ajax et même d'effectuer une validation des données transmises.

voici les codes permettant de le faire:

Code Struts (struts-config.xml)

Code:

1
2
3
4
5
6
7
8
9
10
11
        <form-bean name="vousFormBean" type="formBeans.VousFormBean" />

        <action path="/TestAjax"
                type="actions.TestAjaxAction"
                name="vousFormBean"
                scope="request"
                input="/testAjaxResult.jsp"
                validate="true">
            <forward name="success" path="/testAjaxResult.jsp" />
        </action>

Rien de plus classic... je ne ferai donc pas de tergiversations inutiles.

Code du FormBean(VousFormBean.java)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
public class VousFormBean extends ValidatorForm implements Serializable {
 
    private String telephoneFixe = null;
    private String telephonePortable = null;
    private String email = null;
    private String confirmEmail = null;
 
    /**
     * LES GETTERS ET LES SETTERS
     */
 
    /**
     * LA VALIDATION
     */
}

Un formBean restant un formBean... aucune explications utiles.

Code de l'action (TestAjaxAction.java)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
public class TestAjaxAction extends Action{
 
    public ActionForward execute(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest request,
            HttpServletResponse response) {
 
        HttpSession session  = request.getSession();
        VousFormBean vousFormBean = (VousFormBean) form;
 
        session.setAttribute("email", vousFormBean.getEmail());
        session.setAttribute("confirmEmail", vousFormBean.getConfirmEmail());
        session.setAttribute("telFixe", vousFormBean.getTelephoneFixe());
        session.setAttribute("telPortable", vousFormBean.getTelephonePortable());
 
        return mapping.findForward("success");
    }
}

Une action struts comme les autres... vous y mettez le code qui vous plait. enregistrement en base, verif d'autre.. enfin bref, votre action.

Code de la page du formulaire (testAjax.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<%@ taglib uri="/WEB-INF/struts-tiles" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-html" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-layout" prefix="layout"%>
<%@ taglib uri="/WEB-INF/struts-logic" prefix="logic"%>
<%@ taglib uri="/WEB-INF/struts-bean" prefix="bean"%>
<%@ taglib uri="/WEB-INF/c" prefix="c"%>
<%@ taglib uri="/WEB-INF/msqs" prefix="msqs"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/javascript/ajax.js">
        </script>
        <script>
            // se qu'il faut faire au moment du changement d'etat de la XMLHttpRequest
            function processStateChange() {
                if (req.readyState == 4) { // Complete
                    if (req.status == 200) { // OK response
                        document.getElementById("results").innerHTML = req.responseText;
                    } else {
                        alert("Problem with server response :\n " + req.statusText);
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <html:form action="TestAjax.do">
            <html:text property="email" />
            <html:text property="confirmEmail" />
            <html:text property="telephoneFixe" />
            <html:text property="telephonePortable" />
            <html:submit>nonAjaxSubmit</html:submit>
        </html:form>
        <input type="button" name="submitTestAjax" value="ajaxSubmit" onclick="ajaxSubmitForm(processStateChange, 'vousFormBean')" />
        
        <div id="results" style="border: solid 1px black">
        </div>
    </body>
</html>

Les choses "serieuses" commencent : la il faut que vous fassiez appelle a la fonction javascript chargé d'envoyer le formulaire. Il n'y a dans ce formulaire rien d'exotique.
Attention : il vous faudra mettre exactement le meme nom de formulaire que celui défini dans le struts-config.xml. Je l'ai mis bien en evidence afin que vous puissiez le repérer facilement.

Code de la page de resultat (testAjaxResult.jsp)

Code:

1
2
3
4
5
6
7
8
9
10
 
<%@ taglib uri="/WEB-INF/struts-html" prefix="html"%>
<div>
    <html:errors>
    UN GROS COUCOU...<br>
    email : <%=session.getAttribute("email")%><br>
    confirmEmail : <%=session.getAttribute("confirmEmail")%><br>
    telephoneFixe : <%=session.getAttribute("telephoneFixe")%><br>
    telephonePortable : <%=session.getAttribute("telephonePortable")%><br>
</div>

Page de resultat bidon. vous pouvez remplacer cela par une génération de JSON avec des objets de votre choix. des personne, des villes... enfin bref, ce que vous voulais. C'est le flux de retour de votre action ajax.

Code de mon fichier javascript (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
 
// permet de recuperer un formulaire complet sous forme de paramètres d'url GET
function getFormAsString(formName) {
    // on choppe les valeurs du form
    formElements = document.forms[formName].elements;
 
    // on construit l'url
    returnString = document.forms[formName].action + "?";
    for (var i = 0; i < formElements.length; i++ ) {
        returnString += escape(formElements[i].name) + "=" + escape(formElements[i].value) + "&";
    }
 
    // on retourne l'url
    return returnString; 
}
 
// permet de recuperer le XMLHttpRequest necessaire a l'ajax
function getXMLHttpRequest() {
    if (window.XMLHttpRequest) { // Navigateur non IE
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        return null;
    }
}
 
// permet de soumettre un formulaire en ajax
function ajaxSubmitForm(stateChangeFunction, formName) {
    url = getFormAsString(formName);
    req = getXMLHttpRequest();
    if (req) {
        req.onreadystatechange = stateChangeFunction;
        req.abort();
        req.open("GET", url, true);
        req.send(null);
    }
}

A priori j'ai mis des commentaires assez explicites dans le code.

Et voila... vous savez tout... et tout fonctionne a merveille.

Je sais que la solution arrive un peu tard mais au moins les suivants auront réponse à leur question ^^

A la prochaine, pour de nouvelles aventures.
Scarz.