[débutant] Struts + ajax

**chennuo** · 27/09/2006, 10h25

Bonjour,

Je suis en train d'interfacer une application struts avec ajax. Pour résumer, j'ai un champs input où l'utilisateur peut saisir un nom d'utilisateur et un lien pour envoyer la requête. c'est là qu'intervient ajax.

le code suivant :

Code :

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

1
2
3
4
5
 
<html:form action="/visuUser.do" method="post">	
	<html:text property="inp_initiales" />
	<a href="JavaScript:makeRequest('http://localhost:8080/bnppi/visuUser.do');">AJAX</a>
</html:form>

appelle une fonction utilisant ajax, tout est ok, il me retourne la totalité de la table. quand je met une valeur dans l'input, je n'arrive pas à récupèrer la valeur car le formulaire n'est pas soumi je pense.
si je fais ça : 'http://localhost:8080/bnppi/visuUser.do.inp_initiales=TOTO', ça fonctionne, l'actionform appelle la méthode setInp_initiales sinon il ne l'appelle pas et donc getInp_initiales récupère "" et affiche la totalité de la table...

comment récupérer la valeur dans l'actionform ?

voici le code complet de la page :

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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
	ArrayList liste = (ArrayList)request.getAttribute("liste");
%>
<%@page import="java.util.ArrayList"%>
<html:html locale="true">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Main</title>
		<link rel="stylesheet" type="text/css" href="/css/style.css" />
		<script type="text/javascript" language="javascript">
		    function makeRequest(url) {

        		var http_request = false;

		        if (window.XMLHttpRequest) { // Mozilla, Safari,...
		            http_request = new XMLHttpRequest();
		            if (http_request.overrideMimeType) {
		                http_request.overrideMimeType('text/xml');
		                // Voir la note ci-dessous à propos de cette ligne
		            }
		        } else if (window.ActiveXObject) { // IE
		            try {
		                http_request = new ActiveXObject("Msxml2.XMLHTTP");
		            } catch (e) {
		                try {
		                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
		                } catch (e) {}
		            }
		        }
		
		        if (!http_request) {
		            alert('Abandon :( Impossible de créer une instance XMLHTTP');
		            return false;
		        }
		        http_request.onreadystatechange = function() { alertContents(http_request); };
		        http_request.open('GET', url, true);
		        http_request.send(null);
		
		    }
		
		    function alertContents(http_request) {
			//alert(http_request.readyState);
		        if (http_request.readyState == 4) {
		            if (http_request.status == 200) {
		             	//alert(http_request.status);
			            document.getElementById("ajaxtest").innerHTML = http_request.responseText;
		            } else {
		            	alert(http_request.status);
		                alert('Un problème est survenu avec la requête.');
		            }
		        }		
		    }
	</script>
	</head>
	<body>
		<div class="styletest">test css</div>
		<br>
		<bean:message key="connexionSuccesfull" />. <bean:message key="accueil" />, <bean:write name="checkuserform" property="inp_login" />
		<br>
		<html:link page="/display.do"><bean:message key="dspActivity" />.</html:link>
		<br>
		<% if(liste != null) { %>
		<bean:message key="libObj" /> : <%= liste.get(0) %>
		<% } %>
		<br>
		<html:link page="/switch.do?lang=fr&cty=FR">FR</html:link>
		<br>
		<html:link page="/switch.do?lang=en&cty=EN">EN</html:link>
		<br>
		<html:link page="/switch.do?lang=en&cty=US">US</html:link>
		<br>
		<html:link page="/lienStruts.do?lien=pageTest"><bean:message key="checkLanguage" /></html:link>
		<br>
		<html:link page="/lienStruts.do?lien=retourAccueil"><bean:message key="retourAccueil" /></html:link>
		<br>
		<html:link page="/visuTypeVoie.do"><bean:message key="dspTypeVoie" /></html:link>
		<br>
		<div id="footer">
		jsp include : <jsp:include flush="true" page="../common/footer.jsp"></jsp:include>
		<br>
		include file :<%@ include file="../common/footer.jsp" %>
		<br>
		<h4>tiles :</h4> <tiles:insert page="../common/footer.jsp"></tiles:insert>
		</div>
		<br>
		<html:form action="/visuUser.do" method="post">	
		<html:text property="inp_initiales" />
		<a href="JavaScript:makeRequest('http://localhost:8080/bnppi/visuUser.do');">AJAX</a>
		</html:form>		<br>
		<div id="ajaxtest"></div>
	</body>
</html:html>

l'actionform

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
package com.bnp.bnppi.bean;
 
import org.apache.struts.action.ActionForm;
 
public class AjaxForm extends ActionForm {
 
 
	private static final long serialVersionUID = 1L;
 
	String inp_initiales = null;
 
	public String getInp_initiales() {
		System.out.println("getInp_initiales ==> "+inp_initiales);
		return inp_initiales;
	}
 
	public void setInp_initiales(String inp_initiales) {
		System.out.println("setInp_initiales==> "+inp_initiales);
		this.inp_initiales = inp_initiales;
	}
 
 
 
}

le code de l'action

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
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
package com.bnp.bnppi.crm;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
 
import com.bnp.bnppi.bean.AjaxForm;
import com.bnp.bnppi.bean.BeanUser;
 
public class DisplayUser extends Action {
 
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){
		AjaxForm _form = (AjaxForm)form;
		String initiales = _form.getInp_initiales();
		System.out.println(initiales);
		ArrayList list = new ArrayList();
 
		try{
			Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
			String strUrl = "jdbc:microsoft:sqlserver://PARS001i0015:1433;"
               + "user=auguste;password=magicadm;DatabaseName=AUGUSTE_DEV";
 
			Connection connexion = DriverManager.getConnection(strUrl);
			Statement statement = connexion.createStatement();
			String sql = "SELECT * FROM COLLABORATEURS_TR WHERE INITIALES LIKE '"+initiales+"%'";
			ResultSet resultat = statement.executeQuery(sql);
			while(resultat.next()){
				BeanUser beanuser = new BeanUser();
				beanuser.setPrenom(resultat.getString("PRENOM"));
				beanuser.setNom(resultat.getString("NOM"));
				list.add(beanuser);
			}
			resultat.close();
			statement.close();
			connexion.close();
 
		}catch(ClassNotFoundException cnfe){
			System.out.println("Classe non trouvée "+cnfe);
		}catch(SQLException sqlex){
			System.out.println("SQL ==> "+sqlex);
		}
		request.setAttribute("liste", list);
		return mapping.findForward("resultat");
	}
}

le fichier struts-config.xml

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
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
70
71
72
73
74
75
76
77
78
79
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE struts-config PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN"
  "http://jakarta.apache.org/struts/dtds/struts-config_1_2.dtd">
<struts-config>
	<form-beans>
		<form-bean name="checkuserform" type="com.bnp.bnppi.bean.CheckUserForm" />
		<form-bean name="ajaxForm" type="com.bnp.bnppi.bean.AjaxForm" />
		<form-bean name="emptyBean" type="org.apache.struts.action.DynaActionForm">
		</form-bean>
		<form-bean name="beanStrutsDynaForm" type="org.apache.struts.action.DynaActionForm">
			<form-property name="pays" type="java.lang.String" initial="" />
			<form-property name="ville" type="java.lang.String" initial="" />
		</form-bean>
	</form-beans>
 
	<global-forwards>
		<forward name="Connected" path="/WEB-INF/crm/main.jsp" />
		<forward name="Error" path="/WEB-INF/errors/logonError.jsp" />
		<forward name="success" path="/WEB-INF/crm/main.jsp" />
		<forward name="CheckLanguage" path="/WEB-INF/crm/checkLanguage.jsp" />
		<forward name="Accueil" path="/index.jsp" />
		<forward name="Dsptypevoie" path="/WEB-INF/crm/dspbean.jsp" />
		<forward name="resultat" path="/WEB-INF/common/resultat.jsp" />
	</global-forwards>
 
 
	<action-mappings>
		<action
		path="/checkuser"
		name="checkuserform"
		type="com.bnp.bnppi.connexion.CheckUser"
		scope="session"
		validate="true"
		input="/WEB-INF/errors/logonError.jsp"
		/>
		<action
		path="/display"
		name="emptyBean"
		type="com.bnp.bnppi.crm.DisplayActivity"
		scope="request">
		<forward name="Display" path="/WEB-INF/crm/main.jsp" />
		</action>
		<action
		path="/switch"
		name="emptyBean"
		type="com.bnp.bnppi.utils.SwitchLangAction"
		scope="request"
		/>
		<action
		path="/lienStruts"
		name="emptyBean"
		type="com.bnp.bnppi.crm.LienStrutsAction"
		scope="request"
		/>
		<action
		path="/visuTypeVoie"
		name="emptyBean"
		type="com.bnp.bnppi.crm.DisplayVoie"
		scope="request">
		</action>
		<action
		path="/visuUser"
		name="ajaxForm"
		type="com.bnp.bnppi.crm.DisplayUser"
		scope="request">
		</action>
	</action-mappings>
 
	<message-resources parameter="ApplicationRessources" />
 
	<plug-in className="org.apache.struts.validator.ValidatorPlugIn">
		<set-property
		property="pathnames"
		value="/WEB-INF/validator-rules.xml,/WEB-INF/validator-rules.xml"
		/>
	</plug-in>
 
</struts-config>

la page où je récupére les info de la requete

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ page session="true" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<table border="0" width="200">
		<logic:iterate id="eltest" name="liste">
			<tr>
				<td>${ eltest.prenom }</td><td>${ eltest.nom }</td>
			</tr>
		</logic:iterate>
	</table>
</body>
</html>

merci d'avance à tous....

**Jacques - 06** · 27/09/2006, 14h02

En effet, lorsque tu utilises le href, le formulaire n'est pas passé (contrairement au submit).

La solution est alors de récupérer le formulaire html et de la passer avec ta requête afin que Struts puisse reconstruire son ActionForm.

Si quelqu'un a une meilleure solution je suis aussi intéressé, mais pour l'instant ça fonctionne dans mon appli.

Jacques Desmazières

**chennuo** · 27/09/2006, 15h27

rebonjour,

je comprend pas trop ce sue tu entend pas passer le formulaire...

j'ai réussi à faire fonctionner en enrichissant l'url

en fait dans le javascript, j'ai ajouté

var initiale = "?inp_initiales="+document.ajaxForm.inp_initiales.value;

ce qui me permet de récupérer la valeur saisie par l'utilisateur

puis je l'ajoute à l'url

http_request.open('GET', url+initiale, true);

et comme ça ça fonctionne

.....

je sais pas si c'est la meilleure solution mais bon...

**fractale01** · 25/10/2006, 17h50

Bonjour chennuo,

Je suis aussi débutant en Ajax, et ton code parait vraiment intéressant. Par contre j’ai quelques p’tites questions !
Si j’ai bien compris tu affiche le résultats de ta recherche (donc ta liste) dans une autre page en manipulant directement l’objet « liste ». Ma question est donc comment faire pour afficher cette même liste dans la page appelante à un endroit bien défini dans la page (donc comme j’ai vu dans beaucoup d’exemple avec un inner, par contre un autre problème c’est que l’objet retourné et ni du texte brut ni du XML).

Si quelqu’un peut m’orienter ou me donner quelques idées ça serait sympas.

Bon courage à tous.

**chennuo** · 26/10/2006, 11h53

Salut,

Quel est le contenu de ce que tu veux afficher ?
Si tu ne veux pas apsser par une autre page mais afficher directement dans lapage appelant, il suffit de dire à l'action struts (moi j'utilise struts) dans le forward de mettre le résultat dans la page appelante...

**fractale01** · 26/10/2006, 12h00

Bonjour et merci de ta réactivité,

Et bien c’est une liste de résultat d’une recherche donc un bean dans la balise iterate qui est bien sur masqué dans un 1er temps puis est afficher dans un tableau auto généré bien sur.

**chennuo** · 26/10/2006, 13h27

donc tu peux utiliser la technique suivante :

tu envoies le résultat dans une jsp avec une action iterate sur ta liste, ça te généreres un tableau et ensuite tu fais un innerhtml dans la page appelante dans un div avec un id.

**fractale01** · 26/10/2006, 14h36

Heu franchement là je ne suit pas trop !! J’envoie le résultat dans une autre page, puis je récupère le tableau généré dans ma page appelante ? si c’est bien ca comment associer le tableau généré dans la page (ou se trouve l’iterate) à l’Id du div et aussi comment faire ces redirections ? on envoie le résultat dans une page et on se repositionne sur la page appelante ? J’avoue que ca m’embrouille un peu. Désolé mais c’est la 1ere fois que j’utilise Ajax !!

**chennuo** · 26/10/2006, 15h53

dans ton action struts, une fois que tu as récupéré des données et que tu les as mis dans un objet de type liste, tu fais ;

Code :

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

return mapping.findForward("dspresult");

dans struts-config.xml

dspresult pointe sur une page jsp

dans la page tu iterates comme ceci

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ page session="true" %>
<select name='test2'>
<logic:iterate id="eltest" name="listeVoies">
<option value="${ eltest.code_insee }">${ eltest.nom_voie }</option>
</logic:iterate>
</select>

ici je construis un objet select mais ça peut être un tableau html par exemple...

ensuite dans la page appelant :

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
<table>
		<tr>
			<td>
				<form name="formSelect3">
				<select name="selectCommunes" onchange="makeRequestVoie('http://localhost:8080/bnppi/visuVoies.do');">
					<logic:iterate id="eltest2" name="listeCommunes">
							<option name="commune" value="${ eltest2.nunInsee } ">${ eltest2.codePostal } ${ eltest2.nom }</option>
					</logic:iterate>
					</select>
				</form>
			</td>
			<td>
				<form>
				<div id="selectVoie">
					<select name="selectVoie">
						<option value="0">choix voie</option>
					</select>
				</div>
				</form>
			</td>
		</tr>
	</table>

et dans la fonction javascript qui lance ajax en retour j'ai ça :

Code javascript :

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

1
2
 
document.getElementById("selectVoie").innerHTML = http_request.responseText;

**fractale01** · 26/10/2006, 16h01

Ok merci je vais essayer et je te tiens au courant. La j’ai un autre problème…. C’est que…lors de mon appel ajax à ma méthode qui va récupérer les données de la base en retour (et je ne sais pas pourquoi) je passe systématiquement par la méthode validate de la l’appel Struts précèdent, alors que j’ai bien mis dans le fichier struts-config.xml une action indépendante pour mon appel ajax !!!??? du coup impossible de revenir sur ma page appelante !!

**fractale01** · 27/10/2006, 10h50

Salut,

Bon pour mon dernier p’tit problème c’était rien une p’tite erreur de balise. Sinon j’ai mis en œuvre tes conseils et ça marche nickel.
Encore merci

**chennuo** · 30/10/2006, 14h43

de rien.

[débutant] Struts + ajax

Struts 1 Java

Discussions similaires

Partager

Partager