Discussion :

[fokaana]

Bonjour Les ami(e)s

je suis entraîne de développer un projet avec Spring boot. et un de mes modules de permet de géré les pays , les régions et les villes et pour cela je voudrais afficher les différents régions en fonction d un pays sélectionner et une ville en fonction d'une region selectionner. Voici mon code qui renvoi les regions en fonction du pays choisi

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
	@GetMapping(value="/state")
	@ResponseBody
	public List<Regions> getState(@RequestParam(name = "country" , defaultValue = "", required = false ) int valeur ,final HttpServletRequest request, Model model ) {
 
		List<Regions> listRegion = null;
 
			listRegion = regionService.findByPaysPaysid(countryService.findByPaysid(valeur)); 
 
			for (Regions regions : listRegion) {
 
				log.info("name : "+regions.getRegionname()+"id"+regions.getRegionid()+"status"+regions.getRegionstatus());
			}			
 
		log.warn("listof region "+listRegion);
		model.addAttribute("listState", listRegion);
 
		return listRegion;	
	}

qui marche bien car j ai un retour au niveau de mon navigateur en json



voici mon script jquery pour l'envoi de la requête

Code HTML :

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
     <script type="text/javascript">
                
                $(document).ready(function(){
                        
                        $('#country').on("change", function(){
                                
                                var pays_id = $('#country').val();
                                
                                var lien = "http://localhost:8082/district/state?country="+pays_id;
                                console.log(pays_id);
                            $.get(lien, function(data, status){
                                 // Parcours du json
                                  /*  var result = $.parseJSON(data);
                                       $.each( result, function( key, value ) {
                                           alert(value['regionid']);
                                       });
                                       */
                                       console.log(2);
                                       alert(data);
                                 });
                        })
                });
        
        </script>

et mon formulaire

Code HTML :

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
             <form th:action="@{/district/create}" method="POST" th:object="${district}" enctype="utf-8">
 
                    <p class="error-message" th:if="${#fields.hasGlobalErrors()}"
						th:each="error : ${#fields.errors('global')}" th:text="${error}">Validation
						error
					</p>
 
                    <div class="input-field col s12 m6">
                    	<label for="role" th:text="#{district.country.text}"></label>
                    	<select  name="country" id="country">
                  			<option value="" disabled selected  th:text="#{country.selectpays.text}"></option>
                  			<option th:each="country : ${listpays}"
                  					th:value="${country.paysid}"
                  					th:utext="${country.paysnom}"
                  					>
                  			</option>
                    	</select>
                    </div>
 
                    <div class="input-field col s12 m6">
                    	<label for="state" th:text="#{district.state.text}"></label>
                    	<select  name="state" id="state">
                  			<option value="" disabled selected  th:text="#{state.selectstate.text}"></option>
                    	</select>
                    </div>
 
 
                    <div class="input-field col s12 m6">
                    	<label for="city" th:text="#{district.city.text}"></label>
                    	<select  name="city" id="city">
                  			<option value="" disabled selected  th:text="#{city.selectcity.text}"></option>
                    	</select>
                    </div>
 
                    <div class="input-field col s12 m6">
                        <label for="arrondname" th:text="#{district.arrondname.text}" ></label>
                        <input type="text" th:field="*{arrondname}" id="arrondname"  required/>
                        <p th:if="${#fields.hasErrors('arrondname')}"
          						th:errors="*{arrondname}">Validation error</p>
                    </div>
 
                    <div class="input-field col s12">
       	                <button type="submit" th:text="#{district.create.text}" class="btn btn-medium btn-extented pink darken-2" >submit</button>
                    </div>
                </form>

le problème c'est que method $.get n'est pas envoyé car j'essaye depuis d'afficher les données en console sans succès

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 $.get(lien, function(data, status){
        		         // Parcours du json
        		          /*  var result = $.parseJSON(data);
        		               $.each( result, function( key, value ) {
        		                   alert(value['regionid']);
        		               });
        		               */
        		               console.log(2);
        		               alert(data);
        		         });

SVP J AI BESOIN DE VOTRE AIDE

[keokaz]

bonjour,

qu'est ce qui te revoie comme erreur avec la console de chrome ?
sinon a tu essayé ce que cela donne avec un postman (même si ça fonctionne avec un navigateur) en faisant ta requête de type get:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
http://localhost:8082/district/state?country=40

[fokaana]

Non pas d erreur dans la console et en plus en je fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(data)

J ai la liste des regions correspondant aux pays dans la console

[keokaz]

le status ?

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 $.get(lien, function(data, status){
        		         // Parcours du json
        		          /*  var result = $.parseJSON(data);
        		               $.each( result, function( key, value ) {
        		                   alert(value['regionid']);
        		               });
        		               */
        		               console.log(status);
 
        		         });

sinon déjà avec du natif:

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// Ici, la requête sera émise de façon synchrone.
const req = new XMLHttpRequest();
req.open('GET', 'lien', false); 
req.send(null);
 
if (req.status === 200) {
    console.log("Réponse reçue: %s", req.responseText);
} else {
    console.log("Status de la réponse: %d (%s)", req.status, req.statusText);
}

[fokaana]

Okay merci j'essaye et je vous reviens

[andry.aime]

Bonjour,

Une piste:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 $.get(lien, function(data, status){
var $select = $('#state');
$select.find('option').remove();
$.each(data,function(){
   $('<option>').val(this.regionid).text(this.regionname).appendTo($select);
});
});

A+.