Appel ajax en cr�ant une nouvelle page jsp action

**Philcmoi** · 23/04/2023, 17h48

Bonjour, j'ai une page indexdate.jsp affichant un planing g�n�ral donnant la possibilit� de choisir une p�riode.
J'aimerai afficher une nouvelle page action o� seuls les �v�nements de la p�riode choisie sont affich�s.
Je veux faire tout �a avec JAVA et AJAX.
Merci pour votre aide, de m'aiguiller.

**gervais.b** · 24/04/2023, 11h04

Bonjour,

Quelle est la difficult� sur laquelle vous bloquez ?

**PhilippeGibault** · 24/04/2023, 11h56

Je crains qu'il ne faille pas penser en JSP, mais en 2 zones distinctes.

La Zone Serveur
La Zone client

La Zone serveur, en l'absence d'un framework haut niveau, est une simple servlet qui renvoie un JSON.

La zone client est une application Javascript qui interroge le serveur, r�cup�re le JSON et se met � jour automatiquement.
C'est pour �a que c'est mieux que le client soit une simple page HTML.

L�, on est en web 2.0, la page JSP est plut�t un outil de la grande �poque du web 1.0.

Cordialement.

**marc.collin** · 24/04/2023, 15h08

possible de le faire
https://www.digitalocean.com/communi...t-java-example

je le fais avec thymeleaf constamment soit avec un appel ajax, fetch ou bien avec htmx

Envoy� par PhilippeGibault

Je crains qu'il ne faille pas penser en JSP, mais en 2 zones distinctes.

La Zone serveur, en l'absence d'un framework haut niveau, est une simple servlet qui renvoie un JSON.

La zone client est une application Javascript qui interroge le serveur, r�cup�re le JSON et se met � jour automatiquement.
C'est pour �a que c'est mieux que le client soit une simple page HTML.

L�, on est en web 2.0, la page JSP est plut�t un outil de la grande �poque du web 1.0.

Cordialement.

pas besoin d'un framework, librarie front-end pour faire ca

par exemple en thymeleaf
http://www.laboiteaprog.com/2019/12/...meleaf-en.html

Jakarta MVC a �t� mis � jour r�cemment

**PhilippeGibault** · 24/04/2023, 16h54

Pourquoi pas.

Je ne connais pas thymeleaf.

Mais dans ce contexte, on envoie une seule fois la page HTML (par exemple, pour moi, au travail, c'est un client fait avec Vue.JS), ensuite, le client HTML (index.html, une fois construit) est une application autonome qui se met � jour selon les donn�es envoy�es par le serveur, donn�es demand�es par le client.

**Philcmoi** · 24/04/2023, 17h32

Merci pour vos r�ponses � tous.
Je souhaite passer de indexdate.jsp � action.jsp

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
$.post({
			url : 'action.jsp',
			data : {
				datedepart: from_date,
 	   			datearrive: to_date			},
 	   		function(data, status){
 	   	           alert("Data: " + data + "\nStatus: " + status);
 	   	         });

Voici action.jsp

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
 
String sql = "SELECT * FROM orders WHERE datedepart BETWEEN ? AND ? ORDER BY order_number desc ";
	PreparedStatement statement = conn.prepareStatement(sql);
    statement.setString(1, request.getParameter("datedepart"));
    statement.setString(2, request.getParameter("datearrive"));
 
 	ResultSet rowsselected =  statement.executeQuery();
	ResultSet resultat = statement.getResultSet();
 
	Date datedepartd = rowsselected.getTimestamp("datedepart");
	Date datearrived = rowsselected.getTimestamp("datearrive");
 
 
 
	        DateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy HH:mm");
 
	        // converting the util date into string format
	        final String datedepart = dateFormat.format(datedepartd).toString();
	        final String datearrive = dateFormat.format(datearrived).toString();
%>
    <html>
 
<head>
 
 
 <meta charset="utf-8" />
 
 
</head>
 
<body>
 
    <div class="row">
      <div class="col-md-8">
        <div id="purchase_order">
    <table class="table table-bordered">
    <tr>
    <th width="5%">Numero d ordre</th>
    <th width="30%">conducteur</th>
    <th width="15%">lieudepart</th>
    <th width="15%">lieuarrive</th>
    <th width="15%">participation</th>
 
    <th width="10%">date de depart</th>
    <th width="10%">date d arrive</th>
    <th width="5%">Effacer</th>
    <th width="5%">Mise a jour</th>
    </tr>
<%
    if (resultat!=null)
    {while (rowsselected.next()) {
%>
    	<tr>
		<td width="5%"><%out.println(rowsselected.getString("order_number"));%></td>
		<td width="25%"><%out.println(rowsselected.getString("conducteur"));%></td>
		<td width="20%"><%out.println(rowsselected.getString("lieudepart"));%></td>
		<td width="20%"><%out.println(rowsselected.getString("lieuarrive"));%></td>
		<td width="5%"><%out.println(rowsselected.getString("participation"));%></td>
		<td width="10%"><%out.println(datedepart);%></td>
		<td width="10%"><%out.println(datearrive);%></td>
		<td width="5%"><%out.println("Effacer");%></td>
		<td width="5%"><%out.println("Mise a jour");%></td>
		</tr>
 
<%       }
    }
    else
    {%>
 
        <tr>
        <td colspan="5">No Order Found</td>
        </tr>
    <% }%>
    </table>

Cela est il possible. ? Merci

**OButterlin** · 24/04/2023, 18h57

Quel int�r�t de passer par AJAX ?
AJAX n'est pas fait pour �a, c'est g�n�ralement utilis� pour un appel asynchrone au serveur pour r�cup�rer des donn�es, mais �a ne fait pas de redirection derri�re (m�me si on peut la coder dans le callback).

Si tu veux vraiment le faire en javascript, il y a la solution suivante :

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
 
<script>
function submitForm()
{
    let parts = window.location.pathname.split("/");
    parts[parts.length-1] = "action.jsp";
    let url = parts.join("/");
    window.location.replace(url + "?datedepart=" + document.forms[0]["datedepart"].value + "&datearrivee=" + document.forms[0]["datearrivee"].value);
}
</script>
<form onsubmit="return false">
    <table>
        <tr>
            <td>Date départ</td>
            <td><input type="date" name="datedepart"/></td>
        </tr>
        <tr>
            <td>Date arrivée</td>
            <td><input type="date" name="datearrivee"/></td>
        </tr>
    </table>
    <button onclick="submitForm()">Envoyer</button>
</form>

Sinon, beaucoup plus simple, sans javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="action.jsp">
    <table>
        <tr>
            <td>Date départ</td>
            <td><input type="date" name="datedepart"/></td>
        </tr>
        <tr>
            <td>Date arrivée</td>
            <td><input type="date" name="datearrivee"/></td>
        </tr>
    </table>
    <input type="submit" value="Envoyer">
</form>

**Philcmoi** · 25/04/2023, 09h50

Merci.
Je declenche l' action.jsp par un appuie sur un bouton javascript search apr�s avoir s�lectionner 2 date via jquery dans la page indexdate.jsp.
Puis je acc�der � action.jsp si oui comment ?
L action.jsp affiche les activit�s suivant les dates choisis.

**Philcmoi** · 25/04/2023, 18h07

Voici l'appel de indesdate.jsp � action.jsp

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
 
$('#btn_search').click(function () {
 
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
 
var date1 = new Date(from_date);
var date2 = new Date(to_date);
 
 
 
 // différence des heures
var time_diff = date2.getTime()-date1.getTime();
 
var days_Diff = time_diff / (1000 * 3600 * 24);
 
 alert("days_Diff "+ days_Diff);
 
	   if (days_Diff < 0) {alert("dates invalide");}
	   	  else {
  $.post({
			url : 'action.jsp',
			data : {
				datedepart: from_date,
 	   			datearrive: to_date			
 	   			   },
 	   		function(data, status){
 	   	           alert("Data: " + data + "\nStatus: " + status);
 	   							  }
  		});
 
 
			}
});

Pouvez vous m'aidez et me dire ce qu il ne va pas. Merci
Le code suivant ne fonctionne pas.

Je fais � la place

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
	   		window.location.href = 'action.jsp?datedepart=front_date&datearrive=to_date';

La page action.jsp

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
 
String sql = "SELECT * FROM orders WHERE datedepart BETWEEN ? AND ? ORDER BY order_number desc ";
	PreparedStatement statement = conn.prepareStatement(sql);
    statement.setString(1, request.getParameter("datedepart"));
    statement.setString(2, request.getParameter("datearrive"));
 
 	ResultSet rowsselected =  statement.executeQuery();
	ResultSet resultat = statement.getResultSet();
 
	Date datedepartd = rowsselected.getTimestamp("datedepart");
	Date datearrived = rowsselected.getTimestamp("datearrive");
 
 
 
	        DateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy HH:mm");
 
	        // converting the util date into string format
	        final String datedepart = dateFormat.format(datedepartd).toString();
	        final String datearrive = dateFormat.format(datearrived).toString();
 
<body>
 
    <div class="row">
      <div class="col-md-8">
        <div id="purchase_order">
    <table class="table table-bordered">
    <tr>
    <th width="5%">Numero d ordre</th>
    <th width="30%">conducteur</th>
    <th width="15%">lieudepart</th>
    <th width="15%">lieuarrive</th>
    <th width="15%">participation</th>
 
    <th width="10%">date de depart</th>
    <th width="10%">date d arrive</th>
    <th width="5%">Effacer</th>
    <th width="5%">Mise a jour</th>
    </tr>
<%
    if (resultat!=null)
    {while (rowsselected.next()) {
%>
    	<tr>
		<td width="5%"><%out.println(rowsselected.getString("order_number"));%></td>
		<td width="25%"><%out.println(rowsselected.getString("conducteur"));%></td>
		<td width="20%"><%out.println(rowsselected.getString("lieudepart"));%></td>
		<td width="20%"><%out.println(rowsselected.getString("lieuarrive"));%></td>
		<td width="5%"><%out.println(rowsselected.getString("participation"));%></td>
		<td width="10%"><%out.println(datedepart);%></td>
		<td width="10%"><%out.println(datearrive);%></td>
		<td width="5%"><%out.println("Effacer");%></td>
		<td width="5%"><%out.println("Mise a jour");%></td>
		</tr>
 
<%       }
    }
    else
    {%>
 
        <tr>
        <td colspan="5">No Order Found</td>
        </tr>
    <% }%>
    </table>
    </div>
    </div>
    </div>
    </body>

Avec erreure

org.apache.jasper.JasperException: Une exception s'est produite lors du traitement de [/action.jsp] � la ligne [45]

42: ResultSet rowsselected = statement.executeQuery();
43: ResultSet resultat = statement.getResultSet();
44:
45: Date datedepartd = rowsselected.getTimestamp("datedepart");
46: Date datearrived = rowsselected.getTimestamp("datearrive");
47:
48:

**OButterlin** · 25/04/2023, 19h48

La m�thode JDBC pour lire les donn�es d'une requ�te est

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
Connection connection = DriverManager.getConnection(...avec les paramètres qui vont bien...);
Statement stmt = connection.createStatetement();
ResultSet rs = stmt.executeQuery("select col1, col2 from UneTable");
while (rs.next())
{
   String col1 = rs.getString(1);
   int col2 = rs.getInt(2);
   etc...
}

Pour lire le resultSet il faut toujours utiliser un rs.next(), que ce soit dans une boucle ou dans un if si on n'a besoin que du premier enregistrement.

**Philcmoi** · 26/04/2023, 15h40

En javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var date1 = new Date(from_date);
var date2 = new Date(to_date);
window.location.href = 'action.jsp?datedepart=date1&datearrive=date2';

Or le code ne donne pas de dates.

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
 
Connection conn = DriverManager.getConnection(dbURL, username, password);
 
String sql = "SELECT order_number, conducteur, lieudepart, lieuarrive, participation, datedepart, datearrive FROM orders WHERE datedepart BETWEEN ? AND ? ORDER BY order_number desc ";
PreparedStatement statement = conn.prepareStatement(sql);
System.out.println(request.getParameter("datedepart")+"hello"); // donne chaine date1 et non exemple 24/12/2022
statement.setString(1, request.getParameter("datedepart"));
statement.setString(2, request.getParameter("datearrive"));
 
ResultSet rowsselected =  statement.executeQuery();
ResultSet resultat = statement.getResultSet();
 
String datedepartd = request.getParameter("datedepart");
String datearrived = request.getParameter("datearrive");
 
ResultSet rowsselected =  statement.executeQuery();
ResultSet resultat = statement.getResultSet();
 
	String datedepartd = request.getParameter("datedepart");
	String datearrived = request.getParameter("datearrive");

ET puis pas de donn�es.
Merci

Le mieux serait de savoir transmettre des valeurs via jquery ou javascript.

Solution ???

**Philcmoi** · 27/04/2023, 17h15

J'ai fait

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
 
$('#btn_search').click(function () {
 
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
 
var date1 = new Date(from_date);
var date2 = new Date(to_date);
 
 
 
 // différence des heures
var time_diff = date2.getTime()-date1.getTime();
 
var days_Diff = time_diff / (1000 * 3600 * 24);
 
 alert("days_Diff "+ days_Diff);
 
	   if (days_Diff < 0) {alert("dates invalide");}
	   	  else {
//   $.post({
// 			url : 'action.jsp',
// 			data : {
// 				datedepart: from_date,
//  	   			datearrive: to_date			
//  	   			   },
//  	   		function(data, status){
//  	   	           alert("Data: " + data + "\nStatus: " + status);
//  	   							  }
//   		});
 
	   		window.location.href = 'action.jsp?datedepart='+from_date+'&datearrive='+to_date;
			}
});

window.location.href = 'action.jsp?datedepart='+from_date+'&datearrive='+to_date;

Ca fonctionne.
Merci

Appel ajax en cr�ant une nouvelle page jsp action

Autres Java

Discussions similaires

Partager

Partager