1 pièce(s) jointe(s)
Spring boot: Envoi des requêtes jquery pour gérer les Select input
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:
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
Pièce jointe 504444
voici mon script jquery pour l'envoi de la requête
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
| <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:
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:
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
