[Java] Utiliser Jquery pour peupler un menu en AJAX, avec un Back End Servlet Java/Mysql.

IntroductionJava_logo


Une méthode basique pour acquérir des données Mysql dans un servlet Java, sous condition de choix dans la vue avec Jquery.

Dans un second temps, la servlet retourne les données provenant de la base de données MYSQL au front-end, après les avoir converties au format JSON, à l’aide de la librairie GSON pour java.

Code inspiré de
http://www.simplecodestuffs.com/ajax-implementation-in-jsp-and-servlet-using-jquery/
Mais j’ai ajouté une connexion Mysql…

Photo de l’exo :
svlt1

 

Prérequis


  • Eclipse
  • Tomcat
  • Mysql
  • Créer un ‘new Dynamic Project’ appelé jsf17
  • Glisser déposer la librairies Jquery.js dans le répertoire ‘WebContent/Js’ si il n’existe pas, il faut le créer.
  • Glisser déposer les librairies gson-2-.2.2.jar et mysql-connector.jar dans le répertoire ‘webContent/WEB-INF/lib’
  • Créer une base de données nommée test sur Mysql, puis une table nommée volley avec les colonnes idvolley(int),nom(varchar),prenom (varchar)
  • Peupler la base de données avec des données exemples avec le logiciel MysqlWorkbench(C’est pratique)

Comment faire ?


Ne pas tester l’application dans Eclipse, mais toujours dans un navigateur séparé comme opéra par exemple(Le navigateur de Eclipe ne se remets pas à jour correctement).

Accéder à l’app sur cet url http://localhost:8080/jsf17/index.jsp

Créer une JSP appelée index.jsp qui sera la vue principale dans le répertoire WebContent :


<head>

	<script src='js/jquery.min.js'></script>
	<script>
// TESTE QUE LA LIB JQUERY SOIT BIEN CHARGEEE
	window.onload = function() {
	    if (window.jQuery) {  
	        // jQuery is loaded  
	        alert("Yeah!");
	    } else {
	        // jQuery is not loaded
	        alert("Doesn't Work");
	    }
	}
	
	
	
// TOUT LE CODE JQUERY
$(document).ready(function() {
	$('#sports').change(function(event) {
		var sports = $("select#sports").val();
		$.get('JsonServlet', {
		sportsName : sports
		}, function(response) {
			var select = $('#player');
			select.find('option').remove();
			$.each(response, function(index, value) {
				$('
<option>').val(value).text(value).appendTo(select);
			});
		});
	});
		
	$('#clic').click(function(event) {
		alert($("select#player").val());
	});
});
	
	</script>
</head>

<body>
<h3>AJAX avec Servlet utilisant JQuery et JSON</h3>
Selectionne ton sport favori:

	<select id="sports">
<option>Select Sports</option>
<option value="Football">Football</option>
<option value="Volley">Volley</option>
</select>

	Selectionne ton joueur favori:
	<select id="player">
<option>Selectionner le joueur</option>
</select>

	<button id="clic">Votre choix </button>
</body>

Tout le code contenu entre les balises est du jquery/JS. A l’avenir, j’utiliserais également AngularJs avec un Back end Java de cette manière.

 

 

Etape 2 : Créer une servlet appelée JsonServlet.java puis coller ce code à l’intérieur :

package jsf17;

import java.io.IOException;
import java.sql.*;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;

public class JsonServlet extends HttpServlet {

        private static final long serialVersionUID = 1L;

        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {

                String sportsName = request.getParameter("sportsName");
                List<String> list = new ArrayList<String>();
                String json = null;

                if (sportsName.equals("Football")) {
                        list.add("Lionel Messi");
                        list.add("Cristiano Ronaldo");
                        list.add("David Beckham");
                        list.add("Diego Maradona");
                } else if (sportsName.equals("Volley")) {
                       /* list.add("Sourav Ganguly");
                        list.add("Sachin Tendulkar");
                        list.add("Lance Klusener");
                        list.add("Michael Bevan");*/

                        int i=0;
                        try
                        {
                                String qry;
                                Class.forName("com.mysql.jdbc.Driver");
                                Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
                                Statement s = con.createStatement();
                                qry="Select nom from volley";
                                ResultSet r=s.executeQuery(qry);
                                while(r.next())
                                {

                                    list.add(i,r.getString(1));

                                    i++;
                                }

                        }  catch(Exception ex)
                        {

                            System.out.println("Your query is not working");
                        }

                } else if (sportsName.equals("Select Sports")) {
                        list.add("Select Player");
                }

                json = new Gson().toJson(list);
                response.setContentType("application/json");
                response.getWriter().write(json);
        }
}

Explication du code :

Lorsque l’on choisit un sport dans le premier menu déroulant dans index.jsp, Jquery lance un appel Ajax à la servlet JsonServlet.java;

là, si le sport choisit est « Football », la servlet retourne un objet JAVA converti en JSON avec la lib GSON. Ce objet contient tous les noms des footballers
Par contre, si l’on choisit le sport « Volley », Jquery lance un appel Ajax à la servlet, puis la servlet fait une requête sur Mysql, récupère les données, puis retourne le résultat, également converti en JSON à la vue index.jsp ! La requête sql est très simple… Pour l’instant … (Select nom from volley)..

svlt2.jpg

Conclusion


Depuis le temps que je cherchais un moyen de faire de l’ajax avec Java, je suis heureux de savoir faire cela pour les petits projets, par contre pour les gros projets, il faut utiliser Hibernate qui fait du mapping o/r automatique.

 

A comparer avec un Back-End en Php pour angularJs que j’aime vraiment bien ici :

https://nicolashcodes.wordpress.com/2016/04/04/exercice-53-application-de-commande-de-films-avec-angularjsphpsql-et-le-template-sb-admin-2/

Publicités