Impossible d'envoyer des données vers la servlet
Bonjour
J'ai un formulaire contenu dans une page jsp et j'aimerais envoyer les données vers une servlet. Voici mon code:
index.jsp
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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div class="panel">
<form method="POST" action="creationArticle" name="form1" id="form1">
<br>
<div class="input-group titre_article">
<span class="input-group-addon">Titre de l'article:</span>
<input class="form-control" type="text" name="titre">
<span class="erreur_titre"></span>
</div>
<div class="input-group categorie_article">
<span class="input-group-addon">Catégorie:</span>
<select class="form-control" name="categorie">
<c:choose>
<%-- Si aucune catégorie n'existe en request, affichage d'un message par défaut. --%>
<c:when test="${ empty requestScope.categs }">
<option value="Non définie">Non Définie</option>
</c:when>
<c:otherwise>
<%-- Parcours de la Map des clients en request, et utilisation de l'objet varStatus. --%>
<c:forEach items="${ requestScope.categs }" var="mapCategs" varStatus="boucle">
<option value="<c:out value="${ mapCategs.value.nomCateg }"></c:out>"><c:out value="${ mapCategs.value.nomCateg }"></c:out></option>
</c:forEach>
</c:otherwise>
</c:choose>
</select>
<span class="erreur_categ"></span>
</div>
<div class="panel-body">
<textarea id="editor" name="editor"> </textarea>
<span class="erreur_texte"></span>
</div>
<div class="input-group pan_image">
<span class="input-group-addon">Ajouter une image:</span>
<input type="file" class="custom-file-input" id="customFile" name="image">
<span class="erreur_image"></span>
</div>
<br>
<button type="button" class="btn btn-primary btn_article">Envoyer</button>
<p id="result"></p>
</form>
<br>
</div>
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>
<script>
$(function() {
//Current request reference; can be used else where
var request;
/* attach a submit handler to the form */
$(".btn_article").click(function(event) {
// abort any pending request
if (request) {
request.abort();
}
/* stop form from submitting normally */
event.preventDefault();
/*clear result div*/
$("#result").html('');
var formData = new FormData();
/* $("input[type='file']").each(function(index,inputFile) {
formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
});
var other_data = $('#form1').serializeArray();
$.each(other_data,function(key,input){
formData.append(input.name,input.value);
console.log("champ1: "+input.name+" = "+input.value);
});
*/
var titre = $('#form1 input[name="titre"]').val();
var categ = $('#form1 select[name="categorie"]').val();
var texte = CKEDITOR.instances['editor'].getData();
console.log("le titre est: "+titre);
console.log("la catégorie est: "+categ);
console.log("le texte est: "+texte);
formData.append('titre', titre);
formData.append('categorie', categ);
formData.append('editor', texte);
$("input[type='file']").each(function(index,inputFile) {
formData.append(inputFile.name, inputFile.files[0]); // exemple pour un champ monofichier, sinon il faut parcourir le tableau et créer un tableau avec chaque fichier dedans
});
/* Send the data using post and put the results in a div */
request =$.ajax({
url: "creationArticle",
type: "POST",
enctype: 'multipart/form-data',
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(data){
var result=data.split("+");
var erreur_titre = result[0];
var erreur_categ = result[1];
var erreur_texte = result[2];
var erreur_image = result[3];
var resultat = result[4];
console.log("ok:"+data);
$('.erreur_titre').html(erreur_titre);
$('.erreur_categ').html(erreur_categ);
$('.erreur_texte').html(erreur_texte);
$('.erreur_image').html(erreur_image);
$('#result').html(resultat);
},
error:function(){
$("#result").html('there is error while submit');
}
});
return false;
});
});
</script>
</body> |
web.xml
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>CreationArticle</servlet-name>
<servlet-class>servlets.CreationArticle</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CreationArticle</servlet-name>
<url-pattern>/creationArticle</url-pattern>
</servlet-mapping> |
CreationArticle.java
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
60
61
62
63
64
65
66
67
|
package servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import beans.Article;
import dao.ArticleDao;
import dao.DAOFactory;
import forms.CreationArticleForm;
import java.io.PrintWriter;
public class CreationArticle extends HttpServlet {
public static final String CONF_DAO_FACTORY = "daofactory";
public static final String CHEMIN = "chemin";
public static final String ATT_ADMIN = "admin";
public static final String ATT_FORM = "form";
public static final String SESSION_ADMINS = "categs";
public static final String VUE_FORM = "/WEB-INF/espace_admin/creer_article.jsp";
private ArticleDao articleDao;
public void init() throws ServletException {
/* Récupération d'une instance de notre DAO Utilisateur */
this.articleDao = ( (DAOFactory) getServletContext().getAttribute( CONF_DAO_FACTORY ) ).getArticleDao();
}
public void doGet( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
/* À la réception d'une requête GET, simple affichage du formulaire */
this.getServletContext().getRequestDispatcher( VUE_FORM ).forward( request, response );
}
public void doPost( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
/*
* Lecture du paramètre 'chemin' passé à la servlet via la déclaration
* dans le web.xml
*/
String chemin = this.getServletConfig().getInitParameter( CHEMIN );
/* Préparation de l'objet formulaire */
CreationArticleForm form = new CreationArticleForm( articleDao );
/* Traitement de la requête et récupération du bean en résultant */
Article article = form.creerArticle( request, chemin );
out.print(form.getErreurs().get("titre"));
out.print("+");
out.print(form.getErreurs().get("categorie"));
out.print("+");
out.print(form.getErreurs().get("editor"));
out.print("+");
out.print(form.getErreurs().get("image"));
out.print("+");
out.print(form.getResultat());
}
} |
CreationArticleForm
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
package forms;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.Part;
import beans.Article;
import dao.ArticleDao;
import dao.DAOException;
import eu.medsea.mimeutil.MimeUtil;
public final class CreationArticleForm {
private static final String CHAMP_TITRE = "titre";
private static final String CHAMP_CATEG = "categorie";
private static final String CHAMP_TEXTE = "editor";
private static final String CHAMP_IMAGE = "image";
private static final String CHAMP_VIDEO = "video";
private static final int TAILLE_TAMPON = 10240; // 10ko
private String resultat;
private Map<String, String> erreurs = new HashMap<String, String>();
private ArticleDao articleDao;
public CreationArticleForm( ArticleDao articleDao ) {
this.articleDao = articleDao;
}
public Map<String, String> getErreurs() {
return erreurs;
}
public String getResultat() {
return resultat;
}
public Article creerArticle( HttpServletRequest request, String chemin ) {
Long id_admin = Long.parseLong("1");
Long id_categ = Long.parseLong("1");
String titre = getValeurChamp( request, CHAMP_TITRE );
String categ = getValeurChamp( request, CHAMP_CATEG );
String texte = getValeurChamp( request, CHAMP_TEXTE );
String img = getValeurChamp( request, CHAMP_IMAGE );
// String video = getValeurChamp( request, CHAMP_VIDEO );
String video = "video";
System.out.println("titre: "+titre);
System.out.println("catégorie: "+categ);
System.out.println("texte: "+texte);
....
private static String getValeurChamp( HttpServletRequest request, String nomChamp ) {
String valeur = request.getParameter( nomChamp );
if ( valeur == null || valeur.trim().length() == 0 ) {
return null;
} else {
return valeur;
}
}
} |
Sauf que les valeurs que je récupère dans la servlet sont vides, c'est-à-dire que la valeur de titre, catégorie et texte est vide:
Code:
1
2
3
4
|
System.out.println("titre: "+titre);
System.out.println("catégorie: "+categ);
System.out.println("texte: "+texte); |
Par contre ces valeurs sont bien présentes au moment où je les récupère dans le script jquery:
Code:
1
2
3
4
5
6
7
8
|
var titre = $('#form1 input[name="titre"]').val();
var categ = $('#form1 select[name="categorie"]').val();
var texte = CKEDITOR.instances['editor'].getData();
console.log("le titre est: "+titre);
console.log("la catégorie est: "+categ);
console.log("le texte est: "+texte); |
Donc je ne sais vraiment pas ce qui cloche. J'ai pourtant l'habitude de faire ce genre de choses.
Merci
