Lorsque j'essayais de créer une application Web en Java, j'étais nouveau dans le html et j'ai eu du mal. Dans cet article, j'expliquerai comment envoyer des données en utilisant le form </ font>, qui est facile à parcourir dans les applications HTML et Web.
Saisissez votre nom, sexe et âge, puis cliquez sur le bouton "Suivant" pour changer de page et afficher le contenu saisi. L'environnement est Eclipse.
Créez input.jsp comme écran de saisie. html est écrit en utilisant un format inclus dans <> appelé tag </ font>. La partie entourée par la balise est appelée element </ font>. (Exemple: la partie entourée par la balise html est l'élément html) Les balises peuvent recevoir des paramètres appelés attributs </ font>. (Exemple: vous pouvez créer une zone de texte ou un bouton radio en modifiant l'attribut type de la balise d'entrée.)
Seul l'élément html, mais la source de input.jsp est la suivante.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>formulaire de saisie</h2>
<table border="1">
<tr>
<th>Nom de famille</th>
<td><input type="text"></td>
<th>Nom</th>
<td><input type="text"></td>
</tr>
<tr>
<th>sexe</th>
<td>Masculin:<input type="radio">Femme:<input type="radio"></td>
</tr>
<tr>
<th>âge</th>
<td>
<select>
<option>Moins de 10 ans
<option>10 ans
<option>20 ans
<option>30 s
<option>Quarante
<option>Années 50
<option>60 ans et plus
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="prochain"></td>
</tr>
</table>
</body>
</html>
Ensuite, un écran sans un tel sens est terminé. Cependant, ceci est incomplet. Rien ne se passe lorsque je clique sur le bouton "Suivant". Les deux points suivants ne suffisent pas pour compléter cette application Web. (1) Mécanisme de conservation de la valeur saisie sous forme de données ② Mécanisme pour transmettre les données à la page suivante
l'attribut name et l'attribut value </ font> sont requis pour effacer, c'est-à-dire pour conserver les données. form tag </ font> est nécessaire pour effacer ②, c'est-à-dire pour transmettre des données.
En ajoutant les attributs de nom et de valeur, input.jsp ressemble à ceci: La disposition de l'écran est exactement la même que celle collée ci-dessus.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>formulaire de saisie</h2>
<table border="1">
<tr>
<th>Nom de famille</th>
<td><input type="text" name="sei"></td>
<th>Nom</th>
<td><input type="text" name="mei"></td>
</tr>
<tr>
<th>sexe</th>
<td>Masculin:<input type="radio" name="sex" value="male">
Femme:<input type="radio" name="sex" value="female"></td>
</tr>
<tr>
<th>âge</th>
<td>
<select name="age">
<option value="9">Moins de 10 ans
<option value="10">10 ans
<option value="20">20 ans
<option value="30">30 s
<option value="40">Quarante
<option value="50">Années 50
<option value="60">60 ans et plus
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="prochain"></td>
</tr>
</table>
</body>
</html>
Attribut de nom dans la zone de texte, Attributs de nom et de valeur sur le bouton radio, Ajout d'attributs de nom et de valeur au menu déroulant. L'attribut value n'est pas décrit dans la zone de texte car la valeur réellement saisie est traitée comme la valeur de l'attribut value. La valeur de l'attribut name et la valeur de l'attribut value sont transmises sous forme d'ensemble. Par exemple, si vous sélectionnez un homme avec le bouton radio, il sera passé comme (nom = "sexe", valeur = "homme").
Ensuite, ajoutez la balise form au code source. Écrivez la balise de formulaire de façon à ce qu'elle entoure l'élément des données que vous souhaitez envoyer et le bouton sur lequel l'utilisateur clique lors de l'envoi des données.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>formulaire de saisie</h2>
<form action="http://localhost:8080/QiitaProject/output.jsp" method="post">
<table border="1">
<tr>
<th>Nom de famille</th>
<td><input type="text" name="sei"></td>
<th>Nom</th>
<td><input type="text" name="mei"></td>
</tr>
<tr>
<th>sexe</th>
<td>Masculin:<input type="radio" name="sex" value="male">
Femme:<input type="radio" name="sex" value="female"></td>
</tr>
<tr>
<th>âge</th>
<td>
<select name="age">
<option value="9">Moins de 10 ans
<option value="10">10 ans
<option value="20">20 ans
<option value="30">30 s
<option value="40">Quarante
<option value="50">Années 50
<option value="60">60 ans et plus
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="prochain"></td>
</tr>
</table>
</form>
</body>
</html>
Dans ce programme, les données que vous souhaitez envoyer et les boutons sur lesquels vous cliquez lors de l'envoi sont tous inclus dans l'élément de tableau. J'ai donc écrit la balise form pour qu'elle entoure l'élément talble. Les attributs de balise de formulaire incluent attribut d'action </ font> et attribut de méthode </ font>. Dans l'attribut action, l'URL de la destination de la transition, Dans l'attribut method, spécifiez la méthode d'envoi.
Comme le serveur est configuré localement, l'URL sera localhost. J'ai spécifié un post pour l'attribut action. Vous pouvez également envoyer des données en spécifiant get. Cependant, lorsqu'il s'agit d'informations hautement confidentielles telles que des informations personnelles, il est courant d'utiliser la poste.
J'ai en fait entré les données suivantes et cliqué sur le bouton "Suivant".
Vous avez envoyé les données avec succès. Ensuite, je vais vous expliquer comment obtenir les données envoyées.
Utilisez la zone de demande </ font> pour récupérer les données. Toutes les données que vous avez saisies précédemment sont stockées dans la zone de demande. Par conséquent, sur l'écran de destination de la transition, il est nécessaire d'acquérir les données sur la zone de demande.
output.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>output</title>
</head>
<body>
<h2>profil</h2>
<%
request.setCharacterEncoding("UTF-8");
String sei = request.getParameter("sei");
String mei = request.getParameter("mei");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
out.println("Nom de famille:" + sei + "<br>");
out.println("Nom:" + mei + "<br>");
if(sex.equals("male")){
out.println("genre masculin<br>");
}else{
out.println("sexe féminin<br>");
}
if(age.equals("9")){
out.println("Âge: moins de 10 ans<br>");
}else if(age.equals("60")){
out.println("Âge: 60 ans et plus<br>");
}else{
out.println("âge:" + age + "Remplacer<br>");
}
%>
</body>
</html>
Utilisez la méthode getParameter </ font> pour obtenir les données de la zone de requête. Spécifiez la valeur de l'attribut name dans l'argument de la méthode getParameter. Cela vous permet d'obtenir la valeur de l'attribut value qui correspond à la valeur d'attribut name de l'argument. À ce stade, la valeur acquise sera toujours String type </ font>. Ainsi, par exemple, si vous souhaitez obtenir une valeur entière, vous devez effectuer un cast de String en int.
L'écran de sortie est le suivant.
Ici, nous avons expliqué comment utiliser l'attribut name, l'attribut value et la balise form en créant un programme simple. Les points sont les deux points suivants. ① l'attribut name et l'attribut value sont requis pour contenir les données ② balise form est nécessaire pour envoyer des données
Merci de votre collaboration.