带有调用不同选择器的html java spring
我有以下html代码：
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script>
<form action="#" th:action="@{/}" th:object="${person}">
<select id="person" th:field="*{name}">
<option th:each="p : ${list}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
<input type="submit" onclick="cargaDatos()" value="CargarDatos"/>
</form>
<div th:fragment="selector">
<form action="#" th:action="@{/prueba}" th:object="${prueba}">
<select id="prueba">
<option th:each="p : ${lista}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
</form>
</div>
<button type="submit">informe</button>
<script type="text/javascript"> function cargaDatos() {
$.ajax({ type: "GET",
url: "http://localhost:8080/prueba", success:
function(data){ alert("Ejecutado correctamente"); }, error: function
(data){ alert("Error en la ejecucion"); } }); } </script>
</body>
</html>
这段Java代码：
@RequestMapping(value="/", method=RequestMethod.GET)
public String showForm(Person person, Model model) {
System.out.println("/");
List<Person> list = new ArrayList<Person>();
Person p1 = new Person();
p1.setName("John");
p1.setAge(46);
Person p2 = new Person();
p2.setName("Helen");
p2.setAge(34);
list.add(p1);
list.add(p2);
model.addAttribute("list",list);
return "form";
}
@RequestMapping(value="/prueba", method=RequestMethod.GET)
public String showForm(Person person, Prueba prueba, Model model) {
System.out.println("/prueba");
List<Prueba> lista = new ArrayList<Prueba>();
Prueba p11 = new Prueba();
p11.setName("prueba1");
Prueba p22 = new Prueba();
p22.setName("prueba2");
lista.add(p11);
lista.add(p22);
model.addAttribute("lista",lista);
return "form :: selector";
}
@RequestMapping(value="/", method=RequestMethod.POST)
public String checkPersonInfo(Person person1) throws InterruptedException {
persona = person1.getName();
System.out.printf("1-el nombre seleccionado es: %s \n", persona);
return "redirect:/prueba";
}
@RequestMapping(value="/prueba", method=RequestMethod.POST)
public String checkPersonInfo(Prueba prueba) {
System.out.printf("2-el nombre seleccionado es: %s \n", prueba.getName());
return "redirect:/prueba";
}
我想当用户按下底部时，选择器2在选择器1的功能选项选择中显示选项。但我希望屏幕上总是显示选择器
有什么问题？我不知道我是怎么做到的
# 1 楼答案
让我猜你想在点击按钮后用数据填充选择器，但你不想重新加载页面
问题是您将input submit按钮绑定到一个函数，因此如果单击它，您将提交数据并转到另一个页面
我建议您创建另一个按钮并将函数绑定到它：
javaScript函数：
和html选择器：