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